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.

« 1 of  »


	
    
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. 


	
    
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. 


	
    
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.


	
    
In eleifend consequat dolor ut vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. 

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:

	

« 1 of  »


	
    
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.


	
    
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. 


	
    
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.


	
    
In eleifend consequat dolor ut vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. 

Here is a demo: