Amongst many jQuery sliders available on the web (both open source and paid), Unslider is one that really stands out. The simplicity, ease-of-use and the flexibility to customize the desired output highly makes it one of the top choices for anyone looking for a WordPress Slider (either via a plugin, or custom code).
At just 5.6KB in size, this slider is without a doubt one of the lowest in size while serving the same purpose as any other WordPress slider in the market.
To use Unslider with WordPress posts, a Query (wp_query) can be used to output recent posts, from where we can make use of the posts’ thumbnails (Featured Images) as the background images for the slides. That’s what we will do in the example below.
Step 1: Download and Install Unslider
Download Unslider, and install it on the site. If you’re going to use the slider only on one or a couple of pages at most, I would advise you to install the scripts on those pages only as that will help reduce avoid extra weight and load time on the pages that don’t need the slider. Unslider’s site has a step-by-step guide to help you with the installation.
The slider’s script has to be loaded after the jQuery script. In other words, load the script in the Footer. If you’re not sure how to do this manually, the Header and Footer plugin will come in handy as it will allow you to add scripts in the footer.
Step 2: Create a WP_Query
If you’re not sure how to write one, you can use a tool such as WP_Query Generator to help you build one. Once built, we then need to output the query. The following code will output the slider just like we need.
<?php
/* Unslider Set-up for WordPress */
?>
<section id="slider" class="clearfix">
<div class="post_slider">
<ul>
<?php
global $wp_query;
$args = array (
'post_type' => array( 'post' ),
'order' => 'DESC',
'orderby' => 'date',
'posts_per_page' => '5',
);
$ln_query = new WP_Query( $args );
if ( $ln_query->have_posts() ) {
while ( $ln_query->have_posts() ) {
$ln_query->the_post();
$post_feat_img = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'full' );
?>
<li class="post_slider_single" style="background-image: url(<?php echo $feat_img ?>);">
<div class="post_slider_single_bg">
<div class="container">
<h3><?php the_title(); ?></h3>
<p><?php the_excerpt(); ?></p>
<a href="<?php the_permalink(); ?>">Read More</a>
</div>
</div>
</li>
<?php
}
}
wp_reset_postdata();
?>
</ul>
</div>
</section>There are quite a few things that you might not need or might not be applicable to your theme. For example, the <section> and the .container could be different for you. Regardless, the above can be used as a template for you to customize the WordPress slider to match your theme’s structure.
The code snippet above will produce slides that will have the Featured Image as the background image. If you want to have the images as part of the content aligned left/right, you can remove the style declaration from the <li> and add an <img> tag with some margin to fit with the content.
Step 3: Call the WordPress Slider
Many find this step to be confusing. This step is required in order for the slider to work as it tells the associated JS file to activate on the slider.
For the example above, the following when placed below the slider’s <script>, will activate the slider.
<script>
jQuery(document).ready(function($) {
jQuery('.post_slider').unslider();
});
</script>Unslider has plenty of different options that you can add here in order to customize the slider further. To see all the available options, go to the “Methods & Options” section on the site.
Step 4: Add CSS
The following CSS includes the default CSS required by Unslider, in addition to the CSS for the WordPress slider in the example above.
/* Unslider Settings */
.unslider-fade,
.unslider-wrap {
position: relative
}
.unslider {
overflow: auto;
margin: 0;
padding: 0
}
.unslider-wrap.unslider-carousel>li {
float: left
}
.unslider-vertical>ul {
height: 100%
}
.unslider-vertical li {
float: none;
width: 100%
}
.unslider-fade .unslider-wrap li {
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: 8
}
.unslider-fade .unslider-wrap li.unslider-active {
z-index: 10
}
.unslider li,
.unslider ol,
.unslider ul {
list-style: none;
margin: 0;
padding: 0;
border: none
}
.unslider-arrow {
position: absolute;
left: 20px;
z-index: 2;
cursor: pointer
}
.unslider-arrow.next {
left: auto;
right: 20px
}
.unslider-nav ol {
list-style: none;
text-align: center
}
.unslider-nav ol li {
display: inline-block;
width: 6px;
height: 6px;
margin: 0 4px;
background: 0 0;
border-radius: 5px;
overflow: hidden;
text-indent: -999em;
border: 2px solid #fff;
cursor: pointer
}
.unslider-nav ol li.unslider-active {
background: #fff;
cursor: default
}
#home_slider_cont {
position: relative;
}
.home_slider_single_bg {
padding: 84px 0px;
background-color: rgba(0, 0, 0, .4);
position: relative;
}
.home_slider_single {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: #FFF;
text-align: center;
position: relative;
}
.home_slider_single h3 {
font-size: 40px;
text-transform: capitalize;
margin-bottom: 24px;
}
.home_slider_single p {
font-size: 18px;
line-height: 30px;
padding: 0px 100px;
}
.home_slider_single a {
display: inline-block;
color: #FFF;
background: #e34b37;
padding: 12px 24px;
border-radius: 3px;
margin-top: 36px;
}
.home_slider_single a:hover {
background: #cb311c;
}
.unslider-arrow {
color: #FFFFFF;
font-size: 50px;
}
.next {
top: 45%;
}
.prev {
top: 45%;
}The above should help you set-up a WordPress slider with recent posts (or, depending on the wp_query, the posts you generate) with a background image for the slides.
If you have any questions regarding the example shared in this post, please feel free to ask in your comments.