Create a Simple Infinite Carousel with jQuery

Written by Kevin Liew on 28 Oct 2009
263,126 Views • Tutorials

Introduction

Finally, I have times for this carousel script. I always think that it's hard to figure it out, but thanks to a tutorial - Making a jQuery Infinite Carousel with nice features from tutsvalley. I learnt something new from there. So, yes, I modify the code and make it into something I want, and hopefully this is what you want as well :)

1. HTML

Alright, We have a main wrapper called carousel and inside it, we have two sections - buttons and slides. I have styled the previous and next links to two arrows with mouseover effect. The rest is pretty basic.

<div id="carousel">
	<div id="buttons">
		<a href="#" id="prev">prev</a>
		<a href="#" id="next">next</a>
		<div class="clear"></div>
	</div>
	
	<div class="clear"></div>

	<div id="slides"> 
		<ul>
			<li><img data-src="slide1.gif" width="240" height="240" alt="Slide 1"/></li>
			<li><img data-src="slide2.gif" width="240" height="240" alt="Slide 2"/></li>
			<li><img data-src="slide3.gif" width="240" height="240" alt="Slide 3"/></li>
		</ul>
		<div class="clear"></div>
	</div>

</div>

2. CSS

CSS is a little bit complicated. First of all you have to set correct width in #carousal, #slides, #slides ul and also #slides li. So, I break it down and put extra comments, and if you want to change it, I'd recommend you change it from the LI item first, and the following is the sequence:

  • #slides li :
  • #slides ul : the width is the total width of #ul li items
  • #slides : the width and height should be the same with #ul li items
  • #carousel : the width should be slightly bigger than #ul li items, except the height, because it inclde the height of buttons as well.
#carousel {
	width:255px;
	height:290px;	
	margin:0 auto;
}

#slides {
	overflow:hidden;
	/* fix ie overflow issue */
	position:relative;
	width:250px;
	height:250px;
	border:1px solid #ccc;
}

/* remove the list styles, width : item width * total items */	
#slides ul {
	position:relative;
	left:0;
	top:0;
	list-style:none;
	margin:0;
	padding:0;	
	width:750px;			
}

/* width of the item, in this case I put 250x250x gif */
#slides li {
	width:250px;
	height:250px;	
	float:left;
}

#slides li img {
	padding:5px;
}

/* Styling for prev and next buttons */
#buttons {
	padding:0 0 5px 0;	
	float:right;
}

#buttons a {
	display:block; 
	width:31px; 
	height:32px;
	text-indent:-999em;
	float:left;
	outline:0;
}

a#prev {
	background:url(arrow.gif) 0 -31px no-repeat; 
}

a#prev:hover {
	background:url(arrow.gif) 0 0 no-repeat;
}

a#next {
	background:url(arrow.gif) -32px -31px no-repeat; 
}

a#next:hover {
	background:url(arrow.gif) -32px 0 no-repeat;
}

.clear {clear:both}

3. Javascript

There are two new methods we are about to learn. Well, it's something new to me too! After and Before method.

  • After - Insert content after each of the matched elements.
  • Before - Insert content before each of the matched elements.

So, to create an infinite carousel, we need to depend on these two method because we need:

  • If the user clicked on previous button, we need to move the last item to the front of the first item
  • If the user clicked on next button, we need to move the first item to the back of the last item.

As a result, whenever we clicked on next or previous button, the script will keep moving the item and that make it an infinite carousel. Again, credit to my friend at tutsvalley for this idea, check it out his version of carousel - Making a jQuery Infinite Carousel with nice features

And also, our very cheapskate but absolutely effective method of rotating the slide - using click() function to click next link and set a timer for it :)

$(document).ready(function() {

	//rotation speed and timer
	var speed = 5000;
	var run = setInterval('rotate()', speed);	
	
	//grab the width and calculate left value
	var item_width = $('#slides li').outerWidth(); 
	var left_value = item_width * (-1); 
        
    //move the last item before first item, just in case user click prev button
	$('#slides li:first').before($('#slides li:last'));
	
	//set the default item to the correct position 
	$('#slides ul').css({'left' : left_value});

    //if user clicked on prev button
	$('#prev').click(function() {

		//get the right position            
		var left_indent = parseInt($('#slides ul').css('left')) + item_width;

		//slide the item            
		$('#slides ul').animate({'left' : left_indent}, 200,function(){    

            //move the last item and put it as first item            	
			$('#slides li:first').before($('#slides li:last'));           

			//set the default item to correct position
			$('#slides ul').css({'left' : left_value});
		
		});

		//cancel the link behavior            
		return false;
            
	});

 
    //if user clicked on next button
	$('#next').click(function() {
		
		//get the right position
		var left_indent = parseInt($('#slides ul').css('left')) - item_width;
		
		//slide the item
		$('#slides ul').animate({'left' : left_indent}, 200, function () {
            
            //move the first item and put it as last item
			$('#slides li:last').after($('#slides li:first'));                 	
			
			//set the default item to correct position
			$('#slides ul').css({'left' : left_value});
		
		});
		         
		//cancel the link behavior
		return false;
		
	});        
	
	//if mouse hover, pause the auto rotation, otherwise rotate it
	$('#slides').hover(
		
		function() {
			clearInterval(run);
		}, 
		function() {
			run = setInterval('rotate()', speed);	
		}
	); 
        
});

//a simple function to click next link
//a timer will call this function, and the rotation will begin :)  
function rotate() {
	$('#next').click();
}

Conclusion

Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, bookmark it and help me to spread this tutorial to our friends! :) Thanks!

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

79 comments
Janice 10 years ago
Hi, this is a great simple code that actually works with clear directions. The other carousels are so hard to add. My question was: how do I make the slides go up/down (vertical direction) instead of left/right?
Thank you.
Reply
JC 10 years ago
How do you slow down the actual sliding movement. I understand the time between slides, but actually make them move slower?
Reply
Kevin Liew Admin 10 years ago
Line 47: $('#slides ul').animate({'left' : left_indent}, 200...

change 200 to larger number. (in millisecond)
Reply
Dave 10 years ago
Does anybody know how to slow down actual animation speed? And how do you slide things in up/down, instead of left/right?
Reply
Kevin Liew Admin 10 years ago
You can set it in js script:
//rotation speed and timer
var speed = 5000;

for up/down, you will require fair a bit of changes. It's commented in the js script you can go through and change left to top.
Reply
Paul 10 years ago
Hi, i have recently come across this article which has helped me alot in creating what i need.

I have modified the code slighly (taken out some things)

All works fine but i got stuck on how i was able to target a specific slide based on a #

i have popped it all up on JS fiddle to exppalin a little more: http://jsfiddle.net/ZkeJf/3/

Basically when i user clicks link 2 it needs to show the 2nd slide etc etc
Reply
Michaela 10 years ago
Hey Kevin,

Thanks for the code! I got it to work with my images in a sample webpage. I am having trouble dropping it into the right place on my website though. It's designed like an old website in tables rather than div tags. ... any help??

Thanks, Michaela
Reply
Kevin Liew Admin 10 years ago
I think it's pretty straight forward than div layout. Kinda hard to explain, would you able to show me your site?
Reply
ronny 9 years ago
hi kevin, thanks for the code. i'ts almost what i was looking for, but i miss the key arrow function. is it hard to implement? have no clue of javascript.
Reply
Kevin Liew Admin 9 years ago
This tutorial already have arrow function. Prev and next buttons, is that what you want?
Reply
kobe 9 years ago
hi kevin, thanks for the code! i've been looking everywhere for a simple one and this is the first one i've gotten to work. i do have a question though, is there a way to put the buttons next to the slides instead of above them? when i try and move them by adding padding it moves the slides down with them. thanks!
Reply
Kevin Liew Admin 9 years ago
Hi Kobe, yes, you definitely able to do that.

#carousel put position:relative

Then you can set position:absolute for these two so you can move them around.
<a href="#" id="prev">prev</a>
<a href="#" id="next">next</a>
Reply
Dhanesh S.R 9 years ago
Hi Kevin,
Very nice carousel, pretty good and lightweight.
BTW, I've a doubt how can we stop the infinite loop??
When the list ends, the next button need to disable. Do u have any quick tips for me to do this?
thanks
dhanesh
Reply
Sumawigena 9 years ago
Hi, Thank you this is what i was looking for :)
Reply
Marc 9 years ago
Great post! I've tried several slideshows but this one should be the best however I couldn't get to work. Even I copied and pasted the js code but to no avail. What am I doing wrong that it will not create a carousel slideshow?

Thanks
Reply
Alvaro 9 years ago
Hi!!
Is it possible to list all elements of the carousel and access one particular?
Reply
Paul 9 years ago
Great tutorial! I've written a similar one which is a little less complex yet still works quite well.

I'd appreciate any feedback & hope it's handy: http://paulmason.nam e/item/simple-jquery-carousel-slider-tutorial
Reply
Dan 9 years ago
Hi Kevin! I was trying to use two of your carousels in one page, but i wasn't hable to do it, I read you comment about it, but i couldn't get it. If you can explain for us a bit more, please :D
Reply