Create a Simple Infinite Carousel with jQuery

Written by Kevin Liew on 28 Oct 2009
263,124 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
Paul 9 years ago
Just wondering what I can edit to make this compatible with multiple image sizes, or if this is at all possible with this method? I tried changing the width and height in the CSS to "max-", but this did not work, and I assume the issue is with the item_width variable using outerWidth(), as this seems to only get the width of the first element in the list. Any help would be appreciated - I am completely new to javascript and pretty new to programming in general.
Reply
ahmad badpey 9 years ago
thanks a lot
Reply
avriqq 9 years ago
Thanks, nice carousel.. this is work :)
Reply
Myllena nascimento 9 years ago
Eu queria fazer fã club do carrossel
Reply
mon 9 years ago
how can i use this with 2 or more display???? plese help :D thank
Reply
Srinivas Senapati 9 years ago
Its awesome, I m looking for this come from past I am using plugins but I want write in code without plug in I am very Impressive many thanks
Reply
Biscotte1804 9 years ago
Hello Kevin,

Thank you for this great feature.
It has been pretty useful for the web page i designed this summer that is finally online at http://www.promega.com/b/fr/produits/workflowRNA.html
The only thing i'm missing is dynamic height. for the first carousel page.
Reply
sandeep 9 years ago
Thanks a lot !!!
Reply
Mark 9 years ago
Thank you for the simple code and clear instructions. An excellent starting point!
Reply
Emma 9 years ago
I wanted my images to be 500px wide, but I couldn't make it work- would you mind explaining which bits I have to change? The images vanished completely!
Thanks,
Emma
Reply
David 9 years ago
Hi, great script, do you know how to change it so that three slides are displayed at once?
Thanks
Reply
Jeremy 9 years ago
Hi,

Nice and simple. But if there's only 2 items, the carousel blinks when the element is inserted into the DOM. I've tried playing with the code, but can't get it to smoothely copy the element and then scroll to it.

Any ideas?

Many thanks
Reply
Nathalia 8 years ago
Hi!
I had the same problem, looks like the size of the ul sets the quantity of elements to show, so i did this:

var item_width = $('#carrusel ul li').outerWidth();
// how many li are:
var items_cant = $("#carrusel ul > li").length;
// then multiply them:
var new_width = item_width * items_cant;
// and then use it to set the new width:
$('#carrusel ul').css({'width' : new_width});


(more than a year later...)
Reply
Arif 9 years ago
It is a good example explaining each and every step simply but professionally.It's really useful for me to create carousel confidently.Thanks a lot for this tutorial.Good luck.
Reply