Create a Simple Infinite Carousel with jQuery

Create a Simple Infinite Carousel with jQuery


Create a Simple Infinite Carousel with jQuery

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 src="slide1.gif" width="240" height="240" alt="Slide 1"/></li>
			<li><img src="slide2.gif" width="240" height="240" alt="Slide 2"/></li>
			<li><img 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!

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

71 comments

Emma
Sun, 25th November 2012
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
Tue, 18th December 2012
Hi, great script, do you know how to change it so that three slides are displayed at once?
Thanks Reply
Jeremy
Thu, 20th December 2012
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
Tue, 7th January 2014
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
Tue, 25th December 2012
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
Nirmal
Tue, 19th February 2013
Did any one try implementing pagination on this? Any kind help would be appreciated. Thanks! Reply
Sam
Mon, 6th May 2013
i want show my first li element and then click on next.
as per your code.
the second li element shows first on page load.
how can i do that. Reply
anton
Mon, 1st July 2013
It wold be great if you implement this for example of vertical infinite scroll to.

Thanks for easy to understand example. Reply
Travis
Tue, 2nd July 2013
I was hoping you have an explanation or an idea on how to show all three slides at the same time..? I tried messing around with it but no luck. any help would be much appreciated thank you. Reply
Tania
Fri, 9th August 2013
Thank you for this tutorial. I've read some tutorials about carousel. I hope I can learn it from this one too. Reply
Ursula
Tue, 3rd September 2013
Hello, I just follow this tutorial:
http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery

Is a great tutorial, but i have one question, and I hope you could answer me.

Since i don't want next and prev buttons i try to change this line:

function rotate() {
$('#next').click();
}

to directly the function, this way:

function rotate(){
//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});

}

but nothing works without the click event, and I don't undertand why, (i try many different ways to do it, but no one withoutt the click worked)

I will be so pleased if you could explain me why....

regards Reply
Vinicius
Thu, 21st November 2013
Hey Kevin!

Thanks for the tutorial!
Would like to know if it's possible to add a second slider on the same page?
I've tried, but couldn't manage to do it!
the code I've added to my website is:
<code>
$(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','#slides_2 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', '#slides_2 li:first').before($('#slides li:last', '#slides_2 li:last'));

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

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

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

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

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

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

});

//cancel the link behavior
return false;

});


//if user clicked on next button
$('#next', '#next_2').click(function() {

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

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

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

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

});

//cancel the link behavior
return false;

});

//if mouse hover, pause the auto rotation, otherwise rotate it
$('#slides', '#slides_2').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', '#next_2').click();
}
</code>
thanks! Reply
Jonathan
Mon, 2nd December 2013
cool script! direct and simple! I would like to ask if it is possible to tweak it so it can jump to a specific egg(slide) of the banner? I am facing difficulties in making it dynamic in that sense. A tip from you would be great. Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement