Fullwidth Easy Slider

Overview

The Easy Slider element allows you to set up a simple slideshow within seconds, either at the top of your page, stretching across the whole viewport, or as a content element anywhere on the page.

You can choose between fade and slide transition, duration of slide interval and position.  You can add any number of slideshows you want to a page

Examples of Easy slider element.

Code snippet

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

[av_slideshow_full size='featured' min_height='0px' stretch='' animation='slide' autoplay='false' autoplay_stopper='' interval='5' control_layout='av-control-default' perma_caption='' src='' position='top left' repeat='no-repeat' attach='scroll' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='av-47wmn0'][/av_slideshow_full]

Customization

Title and caption font

Ass custom style to easy slider title and caption fonts.

/*----------------------------------------
// CSS - Easyslider font style
//--------------------------------------*/

/* Easy slider title */
.av_slideshow_full .avia-caption-title {
	/*Your style here */
}

/* Easy slider caption content */
.av_slideshow_full .avia-caption-content p {
	/*Your style here */
}

Caption Background

To add a custom background or align the caption elements please use the CSS selector below.

 /*----------------------------------------
// CSS - Easyslider caption area
//--------------------------------------*/

//* Easy slider caption area */
.av_slideshow_full .slideshow_inner_caption  {
	/*Your style here */
}

If the caption frame is activated in the element options please use the CSS below to change the background color of the caption frame.

./*----------------------------------------
// CSS - Easyslider caption frame
//--------------------------------------*/
caption_framed .slideshow_caption .avia-caption-title{
	/* Your style here */
 }
.caption_framed .slideshow_caption .avia-caption-content p{
	/* Your style here */
 }

Caption buttons

Custom style the easy slider button elements using the CSS below.

/* Easyslider button */
#top .av_slideshow_full .avia-slideshow-button {
	/*Your style here */
}

Slider Arrows

Navigation arrows can be custom styled using the CSS below.

 /* Easyslider navigation arrow */
#top .avia-slideshow-arrows a {
	/*Your style here */
}

Slider navigation dots

Navigation dots inherits the default theme styles. To add custom style to the navigation dots please use the CSS below.

/* Easyslider navigation dots */
#top .avia-slideshow-dots a {
	/*Your style here */
}

/* Easyslider navigation actvive dots */
#top .avia-slideshow-dots a.active {
	/*Your style here */
}

Slider Button Style

Button styles can be selected from the slider element options. To add custom style to the slider buttons please use the CSS below.

 /* Easyslider button */
#top .av_slideshow_full .avia-slideshow-button {
	/*Your style here */
}

Animating slider title, caption and buttons

The slider title, caption, and buttons can be animated using custom CSS animation or you can try any of the animation variables used in the enfold theme in the CSS code provided below.

Example of animated slider caption, title and buttons.

/* Slider title, content and button animation */

.avia_transform .active-slide .avia-caption-title, 
.avia_transform .active-slide .avia-caption-content, 
.avia_transform .active-slide .avia-slideshow-button-2, 
.avia_transform .active-slide .avia-slideshow-button {

    -webkit-animation: avia_pop 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275)!important; 
    animation:         avia_pop 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275)!important; 
}

Slider caption above title

To move the slider caption above the title as seen below please add the CSS to your site.

  

/* CSS - Caption above title */


#top .avia-fullwidth-slider .slideshow_align_caption {
    display: flex!important;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap:wrap;
}
#top .avia-fullwidth-slider h2.avia-caption-title,
#top .avia-fullwidth-slider .avia-caption-content {
   position: relative;
}

#top.avia-fullwidth-slider h2.avia-caption-title {    
    order:2;
}
#top .avia-fullwidth-slider .avia-caption-content {    
    padding: 0;
    order:1;
}

#top .avia-fullwidth-slider .avia-slideshow-button {
    order:3;
}

/* End CSS */

Resource

Contributed video:

Full Width Slider Element Tutorial