Making an infinite JQuery carousel

In this tutorial we will make an infinite JQuery carousel. I noticed that most of tutorials on how to make an infinite JQuery carousel are quite complex, so i decided to show you how to make it much simpler.

We will use an unordered list for our carousel items, which will be placed inside a div with overflow:hidden css property so all items beyond limits of the div will be hidden.

 

 

The infinite effect will be made by changing position of the items, when the user clicks right(next) the first item will be placed after the last item and when he clicks left(previous) the last item will be placed before the first item.
There are many ways to make this effect but i choosed this one, because i think it’s the easiest to understand.

HTML

<div id='carousel_container'>
<div id='left_scroll'><img src='left.png' /></div>
<div id='carousel_inner'>
<ul id='carousel_ul'>
<li><a href='#'><img src='item1.png' /></a></li>
<li><a href='#'><img src='item2.png' /></a></li>
<li><a href='#'><img src='item3.png' /></a></li>
<li><a href='#'><img src='item4.png' /></a></li>
<li><a href='#'><img src='item5.png' /></a></li>
</ul>
</div>
<div id='right_scroll'><img src='right.png' /></div>
</div>

CSS

#carousel_inner {
float:left; /* important for inline positioning */
width:630px; /* important (this width = width of list item(including margin) * items shown */
overflow: hidden;  /* important (hide the items outside the div) */
/* non-important styling bellow */
background: #F0F0F0;
}

#carousel_ul {
position:relative;
left:-210px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 0px;
width:9999px; /* important */
/* non-important styling bellow */
padding-bottom:10px;
}

#carousel_ul li{
float: left; /* important for inline positioning of the list items */
width:200px;  /* fixed width, important */
/* just styling bellow*/
padding:0px;
height:110px;
background: #000000;
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}

#carousel_ul li img {
.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/
/* styling */
cursor:pointer;
cursor: hand;
border:0px;
}
#left_scroll, #right_scroll{
float:left;
height:130px;
width:15px;
background: #C0C0C0;
}
#left_scroll img, #right_scroll img{
/*styling*/
cursor: pointer;
cursor: hand;
}

I think only one of these properties needs to be explained further. The left margin of our unordered list is -210px. That’s because the last item will be moved before the first item, so we are setting the left margin to a negative number of the item’s width.

That’s how it looks. Everything is perfect.Now, the JQuery part…

JQuery

$(document).ready(function() {
//move the last list item before the first item. The purpose of this is if the user clicks previous he will be able to see the last item.
$('#carousel_ul li:first').before($('#carousel_ul li:last'));

//when user clicks the image for sliding right
$('#right_scroll img').click(function(){

//get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
var item_width = $('#carousel_ul li').outerWidth() + 10;

//calculate the new left indent of the unordered list
var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;

//make the sliding effect using jquery's anumate function '
$('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){

//get the first list item and put it after the last list item (that's how the infinite effects is made) '
$('#carousel_ul li:last').after($('#carousel_ul li:first'));

//and get the left indent to the default -210px
$('#carousel_ul').css({'left' : '-210px'});
});
});

//when user clicks the image for sliding left
$('#left_scroll img').click(function(){

var item_width = $('#carousel_ul li').outerWidth() + 10;

/* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;

$('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){

/* when sliding to left we are moving the last item before the first item */
$('#carousel_ul li:first').before($('#carousel_ul li:last'));

/* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
$('#carousel_ul').css({'left' : '-210px'});
});

});
});

That’s it. I think it’s very easy to understand how it works.

 

Download Source: web.enavu.com/files/carousel.rar

Leave a comment