Question

so i have tried making myself an infinite carousel using html, css & jQuery and everything is working apart from the back button will not loop, i’ve spent quite a while doing this now and i’m wondering if anyone has any insight? http://jsfiddle.net/e2SKk/ is where you can see the code! i’m only really doing this because i thought it would give me a chance to learn a lot more, but any criticisms of code layout or technique would be helpful!

specifically its this code thats seems not to work

else if(loopPrev==true){
            sliderActive=true
            $('.item-holder').css({
                'left':clonePos
            });
            $('.item-holder').animate({
                'left':holderPos+$('.slider').width()+'px'
            },function(){
                sliderActive=false;
            });
        };

that is only a snippet btw and won’t make much sense without the rest!

Answer 1

jQuery is cool to write short scripts.
Your slider code in short:

var width = $('.slider').width();
$('.item').css({width:width});
var $holder = $('.item-holder').css({left:-width}).prepend($('.item:last'));

$('.prev').click(function(){
    $holder.not(':animated').css({left:-2*width}).prepend($('.item:last')).animate({left:-width});
});
$('.next').click(function(){
    $holder.not(':animated').css({left:0}).append($('.item:first')).animate({left:-width});
});

​
That’s the complete code.

See this in action on http://jsfiddle.net/creativecouple/YPU2d/