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 and this element supports both images and videos.

Code Snippet

How to use 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 can 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 name support to add your class names to the theme elements.
Disable script merging and clear the cache to view the changes on the frontend.

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 size='featured' animation='slide' autoplay='false' autoplay_stopper='' interval='5' control_layout='' perma_caption='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='av-4cziqv'][/av_slideshow]

CUSTOMIZATION

Slider caption and title

By default, the slider caption and title styles are inherited by the theme settings. To add custom style to the title and caption please use the CSS below.

/*----------------------------------------
// CSS - Easy Slider title and caption
//--------------------------------------*/

/* Caption Title */
.av_slideshow .avia-caption .avia-caption-title {
	font-family: 'Roboto Slab', serif;
	background: #1cc7d0;
    letter-spacing: .05em;
    font-weight:800;
    font-size:30px;
}

/* caption content */
.av_slideshow .avia-caption-content p {
	font-family: 'Ubuntu', sans-serif;
	background: #49a942;
    margin-top:5px;
    letter-spacing: .01em;
}

Align caption and title

The caption and title text are aligned to the left by default. To change the alignment to the center or to right please use the CSS code below.

/*----------------------------------------
// CSS - Easy Slider caption alignment
//--------------------------------------*/

/* Caption alignment */
.av_slideshow .avia-caption {
    right: 17px;
    text-align: center;
}

Add call to action button

How to add a call to action button to the slider?

Enable debug mode.
Create a button element on an empty page.
Copy and paste the shortcode into the caption text area.
Use the CSS below to align the button and caption text.

/*----------------------------------------
// CSS - Easy Slider caption button
//--------------------------------------*/

/* caption content button */
.av_slideshow .avia-button-wrap {
	display:inline-block;
}

/* Caption button */
.av_slideshow .avia-caption .avia-caption-content p {
	background: transparent;
	color:#222;
	display: inline;
}

Resource

Contributed video:

Easy Slider Element Tutorial