jQuery: Content slider

In this tutorial I will show how you can make a content slider with Javascript and jQuery. First we’re going to make the buttons, then make the basic HTML, style it with CSS, and finally animate it with jQuery.

Download Demo

Photoshop: 00:00
HTML: 06:00
CSS: 11:30
Javascript/jQuery: 20:00

You can make as much slides as you want since we’ve used variables to animate our slider. You can also change the width.

If you don’t want to dive into the code you can just include the javascript file into your html file and use the id and classes: #buttonPrev, #buttonNext, #slides, and .slide. Be sure to have the #slides positioned relative and the overflow of it’s parent to hidden.

Javascript/jQuery

I will give a short explanation of the javascript:
First we check if the document is ready with loading else it the javascript would slow down the loading time.

$(document).ready(function(){
});

Then we make our variables, we will get the number of slides, the width of one slide, make a variable to see on wich slide we are, and calculate the maximum we have to animate to:

var slides = $(".slide").length;
var slideWidth = $(".slide").outerWidth();
var currentSlide = 1;
var leftMax = slideWidth * -1 * slides + slideWidth;

Then we calclate and set the width of #slides so you can have more and less the 3 slides:

$("#slides").css({"width" : slides * slideWidth});

Then we make our fuctions that will animate the slider. We want to run them on a button click, we start with the previous button. When the button is clicked we”re going to check if the current slide is the first, if thats true we animate to te maximum (last slide). If the the current slide is not the first we wanna animate one back, so we will animate +800px since we animate negative. In both cases we want to update our currentSlide variable so we now on wich slide we are:

$("#buttonPrev").click(function(){
	if (currentSlide == 1)
	{
		$("#slides").animate({left : + leftMax + "px"}, 600);
		currentSlide = slides;
	}
	else
	{
		$("#slides").animate({left : "+=" + slideWidth + "px"}, 600);
		currentSlide = currentSlide - 1;
	};
});

For the next button we need to check if the current slide is the last one, in that case we want to animate to te first, to 0px. If the currentslide is not the last one we want to animate one forward so we substract 800px. And again in both cases update the currentSlide variable.

$("#buttonNext").click(function(){
	 if (currentSlide == slides)
 	{
		 $("#slides").animate({left : "0px"}, 600);
	 	currentSlide = 1;
	 }
	 else
	 {
		 $("#slides").animate({left : "-=" + slideWidth + "px"}, 600);
		 currentSlide = currentSlide + 1;
	 };
 });

I have commented the files, so download the source files and take a look at them.

Download Demo

I hope you like the tutorial, and if you have questions just post a comment.

Greetz,

Durgé

Posted: August 3rd, 2009 by Durgé

maurycy30 says:
Hi!
I would like to ask how to make three slides visible instead of one. Thank you very much for help,

maurycy

August 17, 2009 at 23:17
Durgé says:
Adjust the css so three slides will be visible, make #slideShow three time the witdh of one slide. Then in the js file multiply the slideWidth variable by three. Add for example slideWidth = slideWidth * 3; somewhere at the top under the var slideWidth = ….
Hope this will help.

August 18, 2009 at 18:25
Alex Green says:
Great tutorial! Very helpful. How hard would it be to have it transition automatically, like a carousel?

Alex

August 24, 2009 at 22:50
Durgé says:
It’s not very hard to make it automatic. You would need to make a loop with the .animate from for example the next button, with a delay before it (you could use a plug in, or just make one in javascript). and don’t forget to update the currentSlide variable. Maybe I will expand the tutorial to cover this.

There are some jQuery plugins that support this feature, like jCarousel for example.

Greetz,

Durgé

August 25, 2009 at 20:05
banny says:
hiiiiiii

very nice tut and very promising site from u guys
good to see u here n best of luck for ur future
and hey nice tut there buddy
can u plz modify a little more and make anything like this…. plzzzz

http://css-tricks.com/anythingslider-jquery-plugin/
thnx a lottt mate 🙂
have fun

September 1, 2009 at 11:24
banny says:
plz plz expand this great tut thanx 🙂

September 1, 2009 at 11:26
no name! says:
sorry i dont understand at 1 and -1 what is that mean can u type it again plz

September 1, 2010 at 05:07
Durgé says:
In the variable currentSlide I store the “position” of the slider. So on load it’s 1, when you click the “next” it becomes 2, and so on..

This is to see if it’s on the first or last slide. Because when it is on the first, the previous button should animate to the last slide. And when it’s on the last, it should animate to the first.

Hope this clears it up a bit..

September 1, 2010 at 13:03
Rakhila says:
Hi…
Is there any way to enable auto slide?

March 31, 2011 at 12:36
Rafael says:
great Site, great tutorial. Thanks.

April 29, 2011 at 19:01
Gonzo says:
First time actually reading into javascript code… your tutorial gives me the best fundamental example I could hope for.

I am beginning to grasp object oriented programming so I understand most of what is going on. Thank you for making a simple easy to follow tutorial with great explainations.

November 12, 2013 at 16:16