WP-Mix

Here is the basic code required for making a simple image slider. It provides a good starting point for rolling your own sliders, carousels, and so forth.

Step 1: The HTML

First add the required minimal markup:

<div class="slides">
	<ul>
		<li><img src="http://example.com/img/slide-01.jpg" alt=""></li>
		<li><img src="http://example.com/img/slide-02.jpg" alt=""></li>
		<li><img src="http://example.com/img/slide-03.jpg" alt=""></li>
	</ul>
	<a href="#" class="slide-next">></a> 
	<a href="#" class="slide-prev"><</a>
</div>

Notice the markup is kept as simple as possible. Only one class name to worry about, and only one outer <div>. The key to making this work is making sure that the images exist, and that the paths specified for the <img> elements are correct.

Step 2: The CSS

Next, here is the basic CSS required to style the markup and make it look like an actual slider. Include the following on the page:

<style>
.slides, .slides ul, .slides li { position: relative; overflow: hidden; width: 580px; height: 380px; margin: 0; padding: 0; }
.slides { margin: 0 auto; }
.slides ul li { float: left; list-style: none; }
a.slide-prev, a.slide-next { 
	position: absolute; top: 50%; z-index: 999; display: block; width: 24px; height: 24px; margin-top: -12px; cursor: pointer; opacity: 0.3;
	color: #fff; background: #000; text-decoration: none; text-align: center; font: bold 16px/24px Impact, sans-serif; border-radius: 24px;
	}
	a.slide-prev:hover, a.slide-next:hover { opacity: 0.7; -webkit-transition: all 0.3s ease; }
	a.slide-next { right: 0; }
</style>

This is about as basic as I could make it, with only one selector and minimal amount of CSS. It includes a few embellishments that may be tweaked or removed as desired. Mostly these styles are meant as a starting point for further development.

Note that the slider is sized at 580px (width) by 380px (height). Make sure that your images are sized accordingly, or modify the CSS to match your images.

Step 3: The jQuery

Lastly, we need the following jQuery snippet to make the magic happen:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
	var interval;
	
	$('.slides').hover(function() {
		if (interval) clearInterval(interval);
		clearInterval(interval);
		interval = null;
	}, function() {
		interval = setInterval(function() { slideRight(); }, 2000);	
	});
	var slideCount  = $('.slides ul li').length;
	var slideWidth  = $('.slides ul li').width();
	var slideHeight = $('.slides ul li').height();
	var sliderWidth = slideCount * slideWidth;
	
	$('.slides').css({ width: slideWidth, height: slideHeight });
	$('.slides ul').css({ width: sliderWidth, marginLeft: - slideWidth });
	$('.slides ul li:last-child').prependTo('.slides ul');
	
	function slideLeft() {
		$('.slides ul').animate({ left: + slideWidth }, 200, function() {
			$('.slides ul li:last-child').prependTo('.slides ul');
			$('.slides ul').css('left', '');
		});
	};
	function slideRight() {
		$('.slides ul').animate({ left: - slideWidth }, 200, function() {
			$('.slides ul li:first-child').appendTo('.slides ul');
			$('.slides ul').css('left', '');
		});
	};
	$('a.slide-prev').click(function(e) {
		e.preventDefault(); slideLeft();
	});
	$('a.slide-next').click(function(e) {
		e.preventDefault(); slideRight();
	});
});
</script>

There are various things that can be tweaked here, such as the interval, 2000, and speed, 200, of each slide. Again, the whole idea here is to keep things as basic as possible to give fellow DIY’s out there a solid starting point for implementing their own image slider. Note that we are including the latest version of jQuery via Google API Hosted Libraries.

That’s all there is to it. Slap each of those code chunks into an HTML file and enjoy a super-minimal starting point for building your own slider for images and/or other content.