This tutorial will show you how to create your own jQuery content slider. You may ask “Why create my own if there are hundreds of already made sliders out there?” This is true: I myself almost always use ready made plugins for my projects. Yet, it is always a good thing to know how they work. It also comes in handy – if you should ever want to customize it (it’s always harder to edit someone else’s code).

View the Demo
If you choose to skip the tutorial – you are free to download the source code from this link

So are you ready to get started? Let’s begin:

Step 1: Create the Base Mark Up

What we need is a series of images in an unordered list:

1
2
3
4
5
6
7

<ul>
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
<li><img src="image4.jpg" /></li>
<li><img src="image6.jpg" /></li>
</ul>

Pretty straightforward code – view it in the browser and see a bunch of images listed from top to bottom.

Step 2: Add jQuery Code to hide unfocused images:

What we’re trying to achieve is to only show the first image of the list and hide the rest. We do this by applying some CSS rules via jQuery to the mark up we’ve created. We also want to line up the hidden images to the right – so we can add controls that animate the entire ul a little bit to the left at a time (see illustration below):

screenshot1 How to Create Your Own jQuery Content Slider

Add the following code right above the closing head tag:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(window).load (function() {
	var theImage = $('ul li img');
	var theWidth = theImage.width()
	//wrap into mother div
	$('ul').wrap('<div id="mother" />');					
	//assign height width and overflow hidden to mother
	$('#mother').css({
		width: function() {
		return theWidth;
	  }, 
		height: function() {
		return theImage.height();
	  }, 
		position: 'relative',
		overflow: 'hidden'  	
	});
		//get total of image sizes and set as width for ul 
	var totalWidth = theImage.length * theWidth;
	$('ul').css({
		width: function(){
		return totalWidth;	
	}				
	});		
 
});//doc ready
 
</script>

In English: in the first script tag – we have connected to the jQuery library online. Then we go in the window.load() event *as supposed to document.ready() – because of an issue detecting image width and height with webkit browsers. Then we set up a couple of variables which are all the images inside the unordered list, along with their widths. We wrap the unordered list (using the .wrap() function) inside a div called “mother” with the CSS rules I mentioned.

Step 3: Add “Next” and “Previous” Buttons

In our HTML – add anchor tags with the class “next” (If you want to move forward the slider) and “previous” (to go backward) inside the list items:

1
2
3
4
5
6
7

<ul>
<li><img src="image1.jpg" /><a class="next" href="#">next</a></li>
<li><img src="image2.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image3.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image4.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image6.jpg" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li>
</ul>

Note that you will not see these links when you preview the page. This is because they are tucked away outside the visible region of the overflow property we’ve created:

screenshot2 How to Create Your Own jQuery Content Slider

Step 3: The Nifty .Animate()Method

Okay, now we’ve come to the part where we actually see some action. The whole point of what we’re trying to do is to move the list a little to the right – when the “next” link is clicked, and to the left if “previous” is clicked:

screenshot3 How to Create Your Own jQuery Content Slider

Add the following javascript code inside the existing script tags:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(theImage).each(		
function(intIndex){				
$(this).nextAll('a')
	.bind("click", function(){
		if($(this).is(".next"))	{
			$(this).parent('li').parent('ul').animate({
				"margin-left": (-(intIndex + 1) * theWidth)				
					}, 1000)	
			} else if($(this).is(".previous")){
			$(this).parent('li').parent('ul').animate({
				"margin-left": (-(intIndex - 1) * theWidth)				
			}, 1000)	
			} else if($(this).is(".startover")){
			$(this).parent('li').parent('ul').animate({
				"margin-left": (0)				
			}, 1000)
	}
	});//close .bind()									 
});//close .each()

Explanation: the code above starts out with the “.each” function – which is essentially a loop that looks for each of our images in the list. Then it finds all of the anchor tags next to the images (through .nextAll) and checks them for the assigned class. If the class says “next” – animate the parent (ul) to the left by applying a margin-left CSS property to it. The same thing goes for class “previous”. The only difference is the index is advanced vs. deducted multiplied by the image width. Lastly – is class “startover” which resets the slider to its original position.

Add the CSS code below inside the “head” tag so you can see the links and start testing them:

1
2
3
4
5
6
7
8

<style>
*{padding:0; margin:0;}
ul {}
ul li {float:left; list-style:none; position:relative; }
ul li a.next {position:absolute; left:100px;}
ul li a.previous{position:absolute; left:0px;}
ul li a.startover{position:absolute; left:200px;}
</style>

Step 4: Make ‘er Nice and Purrty

Technically – our slider is done. This section mainly focuses on making it look nice and presentable. So I grab this file: Slider Constructor from Graphic River. Slider Constructor is a high quality Photoshop filled with shiny slider buttons and controls that will surely bring life to your new slider. Create the buttons of your choice from this file and save them as individual .pngs.

screenshot4 How to Create Your Own jQuery Content Slider

You can set a different button for each anchor tag in each slide. You can also place them anywhere you want with some CSS positioning. Either add an “id” attribute to the individual anchor tags, or an additional class (which is what I did). Below is the CSS for my demo – of course, you might want to code yours differently:

1
2
3
4
5
6
7
8
9

ul li a.next.red{background:url(next-red.png); width:57px; height:73px; position:absolute; left:560px; top:237px;}
ul li a.next.green{background:url(next-green.png); width:67px; height:67px; position:absolute; top:286px; left:486px; }
ul li a.previous.green{background:url(prev-green.png); width:67px; height:67px; position:absolute; top:286px; left:105px;}
ul li a.next.orange{background:url(next-orange.png); width:239px; height:62px; position:absolute; left:360px; top:300px; }
ul li a.previous.orange{background:url(prev-orange.png); width:239px; height:62px; position:absolute; left:20px; top:300px; }
ul li a.next.blue{background:url(next-blue.png); width:57px; height:129px; position:absolute; top:150px; left:562px;}
ul li a.previous.blue{background:url(prev-blue.png); width:58px; height:129px; position:absolute; top:150px;}
ul li a.previous.silver{background:url(previous-silver.png); width:49px; height:50px; position:absolute; top:305px; left:360px;}
ul li a.startover { background:url(startover.png); width:176px; height:73px; position:absolute; top:280px; left:420px;}

Also – the good thing about this code is you can place and style the buttons individually.

Conclusion

View the Demo

There, there – you’ve just done yourself some good coding Sparky! Feel free to modify, re-factor and make the code better. This is as basic as it gets – so have fun tweaking it. Make sure you leave a comment or spread the word by retweeting or liking it in facebook. Until next time!

Have you seen our Theme Collection!

Check below for some high quality and inexpensive Wordpress Themes. These babies are not available anywhere else - Browse through the complete list by clicking here