Create a Simple Infinite Carousel with jQuery

Written by Kevin Liew on 28 Oct 2009
261,158 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
saurabh shah 12 years ago
N ice Carousel.. Simple and very clean ...
Reply
Boba 12 years ago
It\'s great :)

And thanks for mentioning my carousel :)
Reply
Rajiv gopalha 12 years ago
It seems to me quite complicated, but I try to understand..visit website science and technology http://roxeva.blogspot.com
Reply
Sanid 12 years ago
Nice one thanks ... will try to get this working for wordpress :)
Reply
sukhchander 12 years ago
an infinite carousel shouldn\'t need controls, right? it just loops.

i created a much simpler slideshow on my own page: http://bit.ly/1AqLSh

appreciate the feedback
Reply
clippingimages 12 years ago
Nice and well defined jqueries. Thanks for sharing this nice post.
Reply
planeth 11 years ago
Thanks for this usefull code .
I tweaked it a bit, to make it a little more accessible.
inside the css .carousel_inner overflow is set to auto to prevent people without javascript not seeing the other images,
and inside the script the overflow property is set to hidden
$(\'.carousel_inner \').css({\'overflow\' : \'hidden\'});
And i used the click function to trigger the
#left_scroll and #right_scroll
$(\"#left_scroll\").click(function() {slide(\'left\');
return false;});
$(\"#right_scroll\").click(function() {slide(\'right\');
return false;});
Reply
Faiz 11 years ago
Hi nice work.

Can i use it to create wordpress plugin and submit to wordpress .org for public use.

If you have any doubt please contact me via mail

Thanks
Reply
kevin Admin 11 years ago
hi faiz, it's free to use :)
Reply
Vinu 11 years ago
Hi Kevin,

Great work! It looks real good :) Is it possible to make this carousel a non-circular one? How do we do it?

TIA.
Reply
Ruben_H 11 years ago
Hi, the carousel looks very nice, but it has problems with Chrome and Safari(Win ed.).

It seems that removing the setting of the default positions helps some, but still then the carousel doesn't revolve more than once.

I hope you have some ideas about a solution.
Reply
David Karlin 11 years ago
Great piece of code, I'll be using something very much based on it. Thanks very much.

The Chrome problem is this: parseInt won't accept a value like "300px" - it gives the answer NaN. I fixed this by creating the following:

function myParseInt(str){
var px=str.indexOf("px");
return px>0 ? parseInt(str.substr(0,px)) : parseInt(str);
}

Hope this helps!
Reply
Help me 11 years ago
Does anyone have any hints on how to go about adding a pager, with links that go to each specific slide?
Reply