New WordPress 3.5 media uploader is great and very useful for different things, not only for uploading images into posts. For example I use it very often for creating image sliders in posts. In this tutorial I will tell you how to do it in 4 easy steps.
So, how this slider works?
Very simple – all the images uploaded to the post (only uploaded, not directly inserted with <img>
tag) will be used in a slider.
You can also use my tutorial when you need a slider on every product page on your website. Let me show the example of a slider from post images, created on my test website.
So, at first, we need a jQuery plugin. Of course, you could use any plugin you want. But I highly recommend you to look at Owl Carousel. It is simple, fast, responsive, supports swipes on iPhone, you can use it both for sliders and carousels.
Actually we need only two files.
owl.carousel.css
– CSS styles, the slider needs this file to be displayed correctly,owl.carousel.min.js
– the jQuery plugin.
Step 1. CSS and JS
First of all be sure that your website header contains wp_head()
function and your website footer contains wp_footer()
. Without these functions the slider won’t start working.
Upload previously downloaded files owl.carousel.css
and owl.carousel.min.js
somewhere, I ‘ve uploaded them into my current theme directory.
After that insert this code into your functions.php
file:
function rudr_css_and_js_for_slider() { wp_enqueue_style( 'owlslider', get_stylesheet_directory_uri() . '/owl.carousel.css', '', null ); wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'owlsliderjs', get_stylesheet_directory_uri() . '/owl.carousel.min.js', array('jquery'), null, true ); } add_action( 'wp_enqueue_scripts', 'rudr_css_and_js_for_slider' );
By the way, it is better to insert the owl.carousel.css
content into your main css file (style.css
file I think), after that remove or comment #2 line in the code above.
Step 2. Your Slider Width and Height
You should decide your slider images width and height, so it will look more consistent and beautiful. After that open your functions.php
and add this line below:
add_image_size( 'my_slider', 640, 480, true ); // 640 - slider width, 480 - slider height
Then after uploading any image, WordPress will generate a copy with this width and height parameters just for the slider.
Step 3. The Slider HTML
Open a WordPress theme file where you want to display the slider. If you want to display it in posts, then open single.php.
// array with parameters $args = array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'orderby' => 'menu_order', // you can also sort images by date or be name 'order' => 'ASC', 'numberposts' => 5, // number of images (slides) 'post_mime_type' => 'image' ); if ( $images = get_children( $args ) ) { // if there are no images in post, don't display anything echo '<ul id="slider">'; foreach( $images as $image ) { echo '<li>' . wp_get_attachment_image( $image->ID, 'my_slider' ) . '</li>'; } echo '</ul>'; }
Step 4. Activate the Slider
Finally, the last step. You should remember one important thing – insert the code below just before the closing </body>
tag.
Besides, as this is the JavaScript code, you should place it between the <script>
and </script>
tags.
jQuery(function($){ $('#slider').owlCarousel({ items:1, // if you want a slider, not a carousel, specify "1" here loop:true, autoPlay:true, autoplayHoverPause:true, // if slider is autoplaying, pause on mouse hover autoplayTimeout:380, autoplaySpeed:800, navSpeed:500, dots:true, // dots navigation below the slider nav:true, // left and right navigation navText:['<','>'] }); });
Full list of parameters you can find on the Owl Carousel documentation page.
That’s it. The slider is ready now but requires a little CSS customization.
Only the best of WordPress
Subscribe to this weekly newsletter to receive the latest blog posts by email.I respect your privacy. Your email is safe with me.
Going to try
Hello,
Is this slider responive?
Thanks
Martin
Nivo was a great app however it works only with Java 1.9.1
Its not working with current editions
Not working for me…
many many thanks bro. working for me. wp version 4.4.1
great post. help my project done!. Thanks
Hello there,
I was looking for something like this, really, but I need to know if it is posible to add the functionality of lightbox plus navigation.
Could you please point me in the right direction to achieve this?
Thank you very much.
Hello!
Lightbox + Navigation? Did you try Fancybox?
Hello Misha,
I am looking for carousel for client/partner logo. With dynamic multiple image upload functionality.
May you please guide us by new post on it.
Thanks
Hello,
Slick or Owl Carousel 2 are good enough.
Sorry… how do I actually upload images but not insert them into the post?
I think Unattach and Re-attach Media Attachments plugin could help you.