How to Create a Slider for Images In Posts

New WordPress 3.5 media uploader is great and very useful for different things, non only for uploading images into posts. For instance I employ it very often for creating image sliders in posts. In this tutorial I will tell you lot how to practise information technology 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) volition be used in a slider.

images uploaded into the post

You lot tin can also use my tutorial when you demand a slider on every product folio on your website. Let me bear witness the example of a slider from mail images, created on my exam website.

Slider in the post on my test website.

And then, at first, we need a jQuery plugin. Of course, yous could use whatever plugin you lot want. But I highly recommend yous to wait at Owl Carousel. It is unproblematic, fast, responsive, supports swipes on iPhone, you can use it both for sliders and carousels.

Actually we need merely 2 files.

  • owl.carousel.css – CSS styles, the slider needs this file to be displayed correctly,
  • owl.carousel.min.js – the jQuery plugin.

Step one. CSS and JS

Starting time of all be sure that your website header containswp_head() part and your website footer containswp_footer(). Without these functions the slider won't start working.

Upload previously downloaded filesowl.carousel.css andowl.carousel.min.js somewhere, I 've uploaded them into my current theme directory.

After that insert this lawmaking into yourfunctions.php file:

              role 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, truthful ); }   add_action( 'wp_enqueue_scripts', 'rudr_css_and_js_for_slider' );

By the mode, information technology is better to insert theowl.carousel.css content into your main css file (style.css file I call up), after that remove or comment #2 line in the code above.

Pace 2. Your Slider Width and Peak

Y'all should make up one's mind your slider images width and height, and so it will wait more consequent and beautiful. Subsequently that open yourfunctions.php and add this line below:

              add_image_size( 'my_slider', 640, 480, true ); // 640 - slider width, 480 - slider superlative

Then afterwards uploading any paradigm, 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 brandish it in posts, and so opensingle.php 

              // assortment with parameters $args = array( 	'post_parent' => $post->ID, 	'post_type' => 'attachment', 	'orderby' => 'menu_order', // you can as well sort images by appointment or be name 	'lodge' => 'ASC', 	'numberposts' => 5, // number of images (slides) 	'post_mime_type' => 'image' ); if ( $images = get_children( $args ) ) { 	// if there are no images in mail, don't display anything 	echo '<ul id="slider">'; 	foreach( $images equally $paradigm ) { 		echo '<li>' . wp_get_attachment_image( $prototype->ID, 'my_slider' ) . '</li>'; 	} 	echo '</ul>';  }

Step iv. Actuate the Slider

Finally, the concluding step. Y'all should recall ane important matter – insert the code below just earlier the closing</body> tag.

As well, as this is the JavaScript code, you lot should place it between the<script> and</script> tags.

              jQuery(function($){ 	$('#slider').owlCarousel({ 		items:ane, // if you want a slider, not a carousel, specify "ane" hither 		loop:true, 		autoPlay:truthful, 		autoplayHoverPause:truthful, // if slider is autoplaying, interruption 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 lot can find on the Owl Carousel documentation page.

That's it. The slider is ready now but requires a little CSS customization.

Misha Rudrastyh

Misha Rudrastyh

I develop websites since 2008, so information technology is full of 14 years of experience, oh my gosh. Most of all I love love love to create websites with WordPress and Gutenberg, some ideas and thoughts I share throughout my blog.

Need some developer help? Contact me

Follow me on Twitter