Post Slider

Overview

The post slider element allows you to display a 2-5 column slider with entries, that are fetched from any of your Themes active Taxonomies. This also includes Taxonomies that are added via Plugins. So for example, if you have a shop plugin active you will also be able to display the latest Products.

Examples of post slider.

Code Snippets

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_postslider link='portfolio_entries,60,51,37,20,61,38,22,62,63,23,39,54,64,40' wc_prod_visible='' prod_order_by='' prod_order='' columns='3' items='9' offset='0' contents='title' preview_mode='auto' image_size='portfolio' autoplay='no' interval='5' custom_class='' av_uid='av-6pfjb8'] 

Customization

Post slider with round thumbnails

To change the shape of the thumbnails in the post slider please use the below CSS. Best results are achieved when the thumbnail is square in share or else the images will look stretched. In the Post Slider option select the preview image size as 300×300.

 
/*----------------------------------------
// CSS - Post slider with round thumbs
//--------------------------------------*/

.avia-content-slider .slide-image, 
.avia-content-slider .slide-image img {
    border-radius: 200px;
    background: transparent!important;
    width: 200px;
    min-width:200px;
    height: 200px;
}

Title, Meta & Excerpt

Title, meta and excerpt text inherits the style which is set in the theme options. To add custom CSS style to this element please view the CSS code snippet below.

/*----------------------------------------
// CSS - Post slider titel, meta and excerpt 
//--------------------------------------*/

/* Title */
.avia-content-slider .slide-entry-title  {
font-family: 'Playfair Display', serif;
text-transform:uppercase;
letter-spacing:.45em;
}

/* Meta area */
.avia-content-slider .slide-meta,
.avia-content-slider .slide-meta a {
	 font-size:11px;
	 color:#ddd;	 
	}

/* Comments */
.avia-content-slider .slide-meta .slide-meta-comments a {
	/* YOUR STYLE HERE */
}

/* separator */
.avia-content-slider .slide-meta .slide-meta-del {
	/* YOUR STYLE HERE */
}

/* Date */
.avia-content-slider .slide-meta .slide-meta-time {
	/* YOUR STYLE HERE */
}

/* Excerpt content*/
#top .avia-content-slider .slide-entry-excerpt {
	font-family: 'Roboto Mono', monospace;
font-size:13px;
line-height:1.9em;
}
/* Text area  */
#top .avia-content-slider .slide-content {
/* 	background-color:gold; */
	}
#top .avia-content-slider article.slide-entry {
margin-bottom:40px;
}

#top .avia-content-slider .avia-content-slider-inner {
height: 100% !important;
}

/* Read more link */
#top .avia-content-slider .read-more-link {
		background-color:#efefef;
		display:inline-block;
		padding:0 0 0 10px;		
		font-size:10px;
	}

Border, shadow and background color

The look and feel of the post slider element can be completely changed with the help of custom CSS snippets.

/*----------------------------------------
// CSS - Post slider border, shadow and background
//--------------------------------------*/
#top .avia-content-slider {
padding:0 10px;
}
#top .avia-content-slider article.slide-entry {
background: #f6f6f6;
/*border: 1px solid rgb(160, 160, 160);*/
margin-bottom:40px;
}

/* Text area  */
#top .avia-content-slider .slide-content {	
	padding:30px 20px;
	margin-top:-10px;
	}
#top .avia-content-slider-inner {
height: 100% !important;
}

/* Shadow on hover */
#top .avia-content-slider article.slide-entry
 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
#top .avia-content-slider article.slide-entry:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

Overlay effect for post slider

We can add custom styled overlay effect for the post slider using CSS snippet.

/*----------------------------------------
// CSS - Post slider Overlay
//--------------------------------------*/

/* Overlay */
#top .avia-content-slider .slide-entry .slide-content {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	background: rgba(0,0,0,.65);
  	padding: 20px;
  	width:100%;
  	height:100%;
}

/* Title */
.avia-content-slider .slide-entry-title  {
  	color:#FFF;
	font-family: 'Playfair Display', serif;
	text-transform:uppercase;
	letter-spacing:.45em;
}

/* Meta area */
.avia-content-slider .slide-meta,
.avia-content-slider .slide-meta a {
	 font-size:11px;
	 color:#ddd;	 
}

/* Excerpt */
#top .avia-content-slider .slide-entry-excerpt {
font-size:13px;
line-height:1.9em;
color:#FFF;
}

/* Read more link */
#top .avia-content-slider .read-more-link {
    color: #FFF!important;
    background-color: #efefef;
    padding: 0 0 0 10px;
    font-size: 10px;
    position: absolute;
    margin-top: 15px;
	}

Random Post

To display random post in the post slider add the below code to your functions.php file.

How to add an order/orderby option to the blog/post slider/portfolio/masonry grid element

Some users asked us how they can set a different order for their blog/post slider/portfolio/masonry grid elements. The filter solution here: https://www.kriesi.at/documentation/enfold/change-the-sort-order-of-portfolio-elements/ is not flexible because it affects all elements and all custom queries. Since Enfold 2.7.1 it’s possible to add some custom order/orderby options to the blog/post slider/portfolio/masonry grid settings which enable you to change the sort order for each element independently. Insert this code into the child theme functions.php file:

and save the file. Then go to the blog/post slider/portfolio/masonry grid element settings screen, scroll to the bottom of the option window and configure the order/orderby settings. Then save the template and page and the posts should be displayed based on the new sort order.


Attention – if you use the “Random” sort option do not use it in combination with the “pagination” setting. Otherwise you risk that the user just sees the same posts over and over again because wordpress doesn’t know which posts were used on the other pages.

Change Post Slider excerpt length

This is a function to change the length of the excerpts on the Post Slider element:

add_filter('avf_postgrid_excerpt_length','avf_increase_postgrid_excerpt_length', 10, 1);

function avf_increase_postgrid_excerpt_length($prepare_excerpt) {
	$prepare_excerpt = 300;
	return $prepare_excerpt;
}

Resource

Contributed video:

Post Slider Tutorial