A Basic jQuery Slideshow

Most sites you will visit nowadays will have some sort of slideshow or content slider. Check out Themes by bavotasan.com and you will see my Sliderota jQuery plugin in action. I was visiting a site recently that had a very basic slideshow and I wanted to try to recreated it. It wasn’t anything fancy, just two controls that would switch between image/text slides. It took some jQuery, CSS and HTML to get it all working.

First, let’s put together some HTML.

<div id="slideshow">
<div id="controls"><a href="javascript:void(0)" id="prev">&laquo;</a> <span id="num">1</span> of <span id="total"></span> <a href="javascript:void(0)" id="next">&raquo;</a></div>
<ul>
<li>
	<img src="img1.jpg" width="387" height="258" alt="" />
    <p>Phasellus in ligula enim, at pellentesque eros. Sed vehicula, diam vitae scelerisque consectetur, urna lectus fermentum dui, ac dictum tellus ligula at turpis. Integer feugiat dictum augue, cursus ultrices nibh iaculis et. Duis vitae diam et magna bibendum dictum. </p>
</li>
<li>
	<img src="img2.jpg" width="387" height="258" alt="" />
    <p>Fusce libero quam, sollicitudin vel interdum nec, porttitor eu lectus. Quisque non rhoncus nunc. Aliquam mi mi, fermentum non feugiat vel, semper eu erat. In tempus pharetra feugiat. </p>
</li>
<li>
	<img src="img3.jpg" width="387" height="258" alt="" />
    <p>Aliquam at semper nisi. Donec at vulputate velit. Donec eros risus, aliquam at laoreet sit amet, tempor at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies mi in nisl venenatis molestie.</p>
</li>
<li>
	<img src="img4.jpg" width="387" height="258" alt="" />
    <p>In eleifend consequat dolor ut vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. </p>
</li>
</ul>
</div>

Each slide is a list item that contains an image and a paragraph. Let’s style it to get it looking the way we want.

#slideshow {
	border: 1px solid #ccc;
	padding: 10px;
	width: 600px;
	height: 280px;
	}
	
	#slideshow ul {
		position: relative;
		list-style: none;
		padding: 0;
		margin: 0;
		}
		
		#slideshow ul li {
			position: absolute;
			top: 0;
			left: 0;
			display: none;
			}
			
			#slideshow ul li.current {
				display: block;
				}
				
		#slideshow li img {
			float: left;
			margin-right: 20px;
			}
			
	
	#slideshow #controls {
		width: 100%;
		text-align: right;	
		}

Our CSS will add some simple styles. It will also make sure that our unordered list has a relative position so that all of our list items can be aligned directly on top of one another. That will give the illusion that we are switching between slides, when really all we are doing is making one slide display while all the other slides are hidden. That will be done with a little bit of jQuery.

(function($) {
	var len = $("#slideshow li").length;
	var x = 0;
	$("#slideshow #total").text(len);
	$("#slideshow li:eq(0)").addClass("current");
	$("#slideshow li").each(function() {
		$(this).attr('rel', x);
		x++
	});	
	$("#next").click(function() {
		var current = $("#slideshow .current");
		var next = parseFloat(current.attr('rel'))+1;
		if(next==len) {
			return false;
		}
		$("#num").text(parseFloat(next)+1);
		current.removeClass('current');
		$("#slideshow li").each(function() {
			if($(this).attr('rel')==next) {
				$(this).addClass('current');
			}
		});									
	});
	$("#prev").click(function() {
		var current = $("#slideshow .current");
		var prev = parseFloat(current.attr('rel'))-1;
		if(prev<0) {
			return false;
		}
		$("#num").text(parseFloat(prev)+1);
		current.removeClass('current');
		$("#slideshow li").each(function() {
			if($(this).attr('rel')==prev) {
				$(this).addClass('current');
			}
		});									
	});					
})(jQuery)

This code will count the number of list items and display that number in our counter. It will also cycle through each list item and give it a reference number, which is how we can control which slide will appear. Next, it sets up our controls to scroll forward and backward through the slides.

Put it all together and you get this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>A Basic Slideshow</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
#slideshow {
	border: 1px solid #ccc;
	padding: 10px;
	width: 600px;
	height: 280px;
	}
	
	#slideshow ul {
		position: relative;
		list-style: none;
		padding: 0;
		margin: 0;
		}
		
		#slideshow ul li {
			position: absolute;
			top: 0;
			left: 0;
			display: none;
			}
			
			#slideshow ul li.current {
				display: block;
				}
				
		#slideshow li img {
			float: left;
			margin-right: 20px;
			}
			
	
	#slideshow #controls {
		width: 100%;
		text-align: right;	
		}

</style>
</head>
	
<div id="slideshow">
<div id="controls"><a href="javascript:void(0)" id="prev">&laquo;</a> <span id="num">1</span> of <span id="total"></span> <a href="javascript:void(0)" id="next">&raquo;</a></div>
<ul>
<li>
	<img src="img1.jpg" width="387" height="258" alt="" />
    <p>Phasellus in ligula enim, at pellentesque eros. Sed vehicula, diam vitae scelerisque consectetur, urna lectus fermentum dui, ac dictum tellus ligula at turpis. Integer feugiat dictum augue, cursus ultrices nibh iaculis et.</p>
</li>
<li>
	<img src="img2.jpg" width="387" height="258" alt="" />
    <p>Fusce libero quam, sollicitudin vel interdum nec, porttitor eu lectus. Quisque non rhoncus nunc. Aliquam mi mi, fermentum non feugiat vel, semper eu erat. In tempus pharetra feugiat. </p>
</li>
<li>
	<img src="img3.jpg" width="387" height="258" alt="" />
    <p>Aliquam at semper nisi. Donec at vulputate velit. Donec eros risus, aliquam at laoreet sit amet, tempor at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies mi in nisl venenatis molestie.</p>
</li>
<li>
	<img src="img4.jpg" width="387" height="258" alt="" />
    <p>In eleifend consequat dolor ut vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. </p>
</li>
</ul>
</div>
<script type="text/javascript">
(function($) {
	var len = $("#slideshow li").length;
	var x = 0;
	$("#slideshow #total").text(len);
	$("#slideshow li:eq(0)").addClass("current");
	$("#slideshow li").each(function() {
		$(this).attr('rel', x);
		x++
	});	
	$("#next").click(function() {
		var current = $("#slideshow .current");
		var next = parseFloat(current.attr('rel'))+1;
		if(next==len) {
			return false;
		}
		$("#num").text(parseFloat(next)+1);
		current.removeClass('current');
		$("#slideshow li").each(function() {
			if($(this).attr('rel')==next) {
				$(this).addClass('current');
			}
		});									
	});
	$("#prev").click(function() {
		var current = $("#slideshow .current");
		var prev = parseFloat(current.attr('rel'))-1;
		if(prev<0) {
			return false;
		}
		$("#num").text(parseFloat(prev)+1);
		current.removeClass('current');
		$("#slideshow li").each(function() {
			if($(this).attr('rel')==prev) {
				$(this).addClass('current');
			}
		});									
	});					
})(jQuery)
</script>
</body>
</html>

Here is a demo: