Featured Image Slider

Overview

This element allows you to display a slider that shows several posts and their preview images. You can use any registered post type, such as blog posts, products, portfolio entries and even post types added by other plugins. The slider can be displayed as either fullwidth element or as a smaller content element.

Examples of Featured Image Slider.

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_feature_image_slider link='category,149' wc_prod_visible='' prod_order_by='' prod_order='' items='3' offset='enforce_duplicates' contents='title' slider_size='16:9' preview_mode='auto' image_size='portfolio' control_layout='av-control-default' animation='fade' autoplay='no' interval='5' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' custom_class='' av_uid='av-1xg7zi']

Customization

Font Slyle

To change the default look of the fonts on the featured image slider please use the CSS code below.

/*----------------------------------------
// CSS - Featured image slider fonts
//--------------------------------------*/

/* Font style */
#top .avia-featureimage-slideshow .slideshow_caption h2 a {
 	color:#222;	
 	text-shadow: none;
 	background: #fff;
 	padding:0 10px;
}

/* remove underline */
#top .avia-featureimage-slideshow h2.avia-caption-title:after {
	display: none!important;
}

Resource

Contributed video:

Featured Image Slider Element Tutorial