This tutorial I will show you how to create your very own custom image slider using custom post types. In this article, we will share how to create a WordPress slider for custom post types. There is a great slider by flexslider personally I use it on all my sites and you can use it without a plugin. Download the slider from that link i provided.
Now copy the flexslider.css
file and jquery.flexslider-min.js
file into your theme folder.
Now in your header.php you paste below code that i given
<link rel="stylesheet" href="<YOUR_THEME_LINK>/flexslider.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="<YOUR_THEME_LINK>/jquery.flexslider-min.js"></script>
<script type="text/javascript">(function($) {
$(window).load(function() {
$('#slider .flexslider').flexslider({
animation: 'slide',
slideshowSpeed: 9000,
animationSpeed: 900,
pauseOnAction: true,
pauseOnHover: true,
controlNav: false,
directionNav: true,
controlsContainer: ".flexslider",
});
});
})(jQuery)</script>
in your homepage file (or anywhere you want the slider to show) paste below code that i given
<section id="slider">
<div class="flexslider">
<ul class="slides">
<?php query_posts(array('post_type' => '<YOUR_CUSTOM_POST_TYPE>','orderby' => 'rand')); if(have_posts()) : while(have_posts()) : the_post();?>
<li class="slide">
<?php the_title(); ?>
<?php the_excerpt(); ?>
<?php the_post_thumbnail(); ?>
</li>
<?php endwhile; endif; wp_reset_query(); ?>
</ul>
</div>
</section>