Fullwidth Easy Slider

Overview

ThePiece of cake Slider element allows y'all to set a uncomplicated slideshow within seconds, either at the top of your folio, stretching across the whole viewport, or as a content chemical element anywhere on the page.

You can choose between fade and slide transition,duration of slide interval and position.  You can add togetherany number of slideshows you lot desire to a folio

Examples of Easy slider element.

Code snippet

How to utilise the snippets?

  • Add the CSS Snippets to Enfold child theme styles.
  • Add the JS and PHP scripts to your child theme functions.php file.
  • Shortcodes tin be used in a text area in pages, posts, sliders and widget areas. Enable debug mode to view the page shortcode.
  • Enable custom CSS class proper noun support to add your course names to the theme elements.
  • Disable script merging and articulate the cache to view the changes on the frontend.

NOTE: If the code snippets produce a different consequence on your site, it may be because the settings on your site are different or due to any customization already added to achieve a like outcome. 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='fake' autoplay_stopper='' interval='5' control_layout='av-control-default' perma_caption='' src='' position='tiptop left' echo='no-repeat' attach='curl' av-desktop-hibernate='' 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 hither */ }  /* Easy slider caption content */ .av_slideshow_full .avia-caption-content p { 	/*Your fashion here */ }

Caption Background

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

                /*---------------------------------------- // CSS - Easyslider caption surface area //--------------------------------------*/  //* Like shooting fish in a barrel slider caption area */ .av_slideshow_full .slideshow_inner_caption  { 	/*Your manner here */ }

If the caption frame is activated in the element options please utilise the CSS beneath to change the groundwork color of the caption frame.

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

Caption buttons

Custom style the like shooting fish in a barrel slider button elements using the CSS below.

/* Easyslider button */ #top .av_slideshow_full .avia-slideshow-button { 	/*Your way hither */ }

Slider Arrows

Navigation arrows can exist custom styled using the CSS below.

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

Slider navigation dots

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

/* Easyslider navigation dots */ #top .avia-slideshow-dots a { 	/*Your fashion hither */ }  /* 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 fashion to the slider buttons please use the CSS below.

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

Animating slider title, explanation and buttons

The slider title, caption, and buttons can be animated using custom CSS blitheness or yous can try whatsoever of the blitheness variables used in the enfold theme in the CSS lawmaking provided below.

Case of blithe slider caption, championship and buttons.

/* Slider title, content and button blitheness */  .avia_transform .active-slide .avia-caption-title,  .avia_transform .active-slide .avia-explanation-content,  .avia_transform .active-slide .avia-slideshow-button-2,  .avia_transform .active-slide .avia-slideshow-push {      -webkit-blitheness: avia_pop 0.7s one cubic-bezier(0.175, 0.885, 0.320, 1.275)!important;      blitheness:         avia_pop 0.7s i cubic-bezier(0.175, 0.885, 0.320, 1.275)!important;  }

Slider caption to a higher place championship

To move the slider caption in a higher place the championship as seen below please add the CSS to your site.

                                /* CSS - Explanation above title */   #peak .avia-fullwidth-slider .slideshow_align_caption {     display: flex!important;     flex-management: column;     justify-content: space-between;     flex-wrap:wrap; } #top .avia-fullwidth-slider h2.avia-caption-title, #elevation .avia-fullwidth-slider .avia-explanation-content {    position: relative; }  #height.avia-fullwidth-slider h2.avia-caption-championship {         gild:two; } #top .avia-fullwidth-slider .avia-explanation-content {         padding: 0;     guild:one; }  #top .avia-fullwidth-slider .avia-slideshow-button {     society:3; }  /* End CSS */

Resource