carousel using jQuery

Question

I know there are plugins available out there, but I'm trying to make one of myself but before that I'm trying to understand the concept of making it as an infinite/circular carousel. Here is my jsfiddle so far.. http://jsfiddle.net/hbk35/KPKyz/3/

HTML:

    <div id="carousel_wrapper">
    <ul>
        <li>
            <div>0</div>
        </li>
        <li>
            <div>1</div>
        </li>
        <li>
            <div>2</div>
        </li>
        <li>
            <div>3</div>
        </li>
        <li>
            <div>4</div>
        </li>
        <li>
            <div>5</div>
        </li>
        <li>
            <div>6</div>
        </li>
        <li>
            <div>7</div>
        </li>
    </ul>
</div>
<br>
<div id="buttons">
    <button id="left">left</button>
    <button id="right">right</button>
</div>

JS:

var container = $("#carousel_wrapper");

var runner = container.find('ul');
var liWidth = runner.find('li:first').outerWidth();
var itemsPerPage = 3;
var noofitems = runner.find('li').length;

runner.width(noofitems * liWidth);
container.width(itemsPerPage*liWidth);

$('#right').on('click',function(){
   runner.animate({scrollLeft: -liWidth},1000);
});


$('#left').on('click',function(){
    runner.animate({scrollLeft: liWidth},1000);
});

CSS:

div#carousel_wrapper{

    overflow:hidden;
    position:relative;
}

ul {
    padding:0px;
    margin:0px;
}
ul li {
    list-style:none;
    float:left;
}
ul li div {
    border:1px solid white;
    width:50px;
    height:50px;
    background-color:gray;
}

I do not want to use clone and detach method. Is there any other way to do that? Please anyone would like to guide me where I'm making mistake. I'm newbie to stack overflow and javascript/jquery also..trying to learn on my own. Forgive me I'm trying since to put my code onto the question, couldn't get neat and separate like others.

Thanks!!

Answer 1

Here you go: http://jsfiddle.net/KPKyz/5/

JS

var container = $("#carousel_wrapper");

var runner = container.find('ul');
var liWidth = runner.find('li:first').outerWidth();
var itemsPerPage = 3;
var noofitems = runner.find('li').length;

runner.width(noofitems * liWidth);
container.width(itemsPerPage*liWidth);

$('#right').click(function() {
    $( runner  ).animate({ "left": "-=51px" }, "slow" );
});


$('#left').click(function() {
    $( runner  ).animate({ "left": "+=51px" }, "slow" );
});

CSS

div#carousel_wrapper{

 overflow:hidden;
 position:relative;
 width:500px;
 height: 100px;
}

ul {
 padding:0px;
 margin:0px;
 position: absolute;
 top:50px;
 left: 0px;
 width:300px;
 height: 50px;
 overflow: hidden;
 }
 ul li {
   list-style:none;
  float:left;
 }
ul li div {
  border:1px solid white;
  width:50px;
  height:50px;
  background-color:gray;
}

Answer 2

Here you go an infinite. Could be done with less code for sure. http://jsfiddle.net/artuc/rGLsG/3/

HTML:

<a href="javascript:void(0);" class="btnPrevious">Previous</a>
<a href="javascript:void(0);" class="btnNext">Next</a>
<div class="carousel">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
    </ul>
</div>

CSS:

.carousel{
        padding-top: 20px;
        width: 357px;
        overflow: hidden;
        height: 50px;
        position: relative;
    }.carousel ul{
        position: relative;
        list-style: none;
        list-style-type: none;
        margin: 0;
        height: 50px;
        padding: 0;
    }.carousel ul li{
        position: absolute;
        height: 25px;
        width: 50px;
        float: left;
        margin-right: 1px;
        background: #f2f2f2;
        text-align: center;
        padding-top: 25px;
    }

JS:

$(function(){
        var carousel = $('.carousel ul');
        var carouselChild = carousel.find('li');
        var clickCount = 0;
        var canClick = true;

        itemWidth = carousel.find('li:first').width()+1; //Including margin

        //Set Carousel width so it won't wrap
        carousel.width(itemWidth*carouselChild.length);

        //Place the child elements to their original locations.
        refreshChildPosition();

        //Set the event handlers for buttons.
        $('.btnNext').click(function(){
            if(canClick){
                canClick = false;
                clickCount++;

                //Animate the slider to left as item width 
                carousel.stop(false, true).animate({
                    left : '-='+itemWidth
                },300, function(){
                    //Find the first item and append it as the last item.
                    lastItem = carousel.find('li:first');
                    lastItem.remove().appendTo(carousel);
                    lastItem.css('left', ((carouselChild.length-1)*(itemWidth))+(clickCount*itemWidth));
                    canClick = true;
                });
            }
        });

        $('.btnPrevious').click(function(){
            if(canClick){
                canClick = false;
                clickCount--;
                //Find the first item and append it as the last item.
                lastItem = carousel.find('li:last');
                lastItem.remove().prependTo(carousel);

                lastItem.css('left', itemWidth*clickCount);             
                //Animate the slider to right as item width 
                carousel.finish(true).animate({
                    left: '+='+itemWidth
                },300, function(){
                    canClick = true;
                });
            }
        });

        function refreshChildPosition(){
            carouselChild.each(function(){
                $(this).css('left', itemWidth*carouselChild.index($(this)));
            });
        }
    });