Carousel - Simple and Infinite

Carousel - Simple and Infinite

by Nirvanachain

HTML

<!-- URL:  
http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery 
-->
<div class="carousel clearfix">
    <div class="buttonsContainer clearfix">
        <a href="#" class="button prev">prev</a>
        <a href="#" class="button next">next</a>
    </div>
    <!--/ buttons -->

    <div class="slides">
        <ul class="imgContainer clearfix">
            <li><div class="img one">One</div></li>
            <li><div class="img two">Two</div></li>
            <li><div class="img three">Three</div></li>
        </ul>
    </div>
    <!-- /slides -->
    
</div>
<!-- /carousel -->

CSS

/** clearfix :: start **/
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
} 
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
/** clearfix :: end **/

/** carousel :: start **/
.clear {clear:both;}

.carousel{
    width: 255px; /* the width should be slightly bigger than .ul li items, except the height, because it inclde the height of buttons as well. */
    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 */    
.imgContainer {
    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;
}

.img {
    padding:5px;
    width:240px;
    height:240px;
}
.img.one {background-color: blue;}
.img.two {background-color: green;}
.img.three {background-color: yellow;}

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

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

.prev {
    background: #FF0000;
}
.prev:hover {
    background: #000000;
}

.next {
    background: #EFEFEF;
}

.next:hover {
    background: #000000;
}
/** carousel :: end **/

JavaScript

$(document).ready(function() {
    //rotation speed and timer
    var speed = 5000;
    var run = setInterval('rotate()', speed);
    
    //grab width and calculate value
    var item_width = $('.slides li').outerWidth();
    console.log('item_width = ' + item_width);
    var left_value = item_width * (-1);
    console.log('left_value = ' + left_value);
    
    //move last item before the first in case user clicks previous button
    $('.slides li:first').before( $('.slides li:last') );
    
    //set the default item to the correct position
    $('.slides ul.imgContainer').css({'left' : left_value});
    
    //if user clicks prev button
    $('.prev').click(function() {
        //get right position
        var left_indent = parseInt( $('.slides ul.imgContainer').css('left') ) + item_width;
        //slide the item
        $('.slides ul.imgContainer').animate(
            {'left' : left_indent},
            200,
            function() {
                //move the last item and put it as the 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.imgContainer').css('left') ) - item_width;
        
        //slide the item
        $('.slides ul.imgContainer').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});
        
            }
        );
        
       ...