jquery-infinite-carousel - jump 3 items instead of one

Posted by Rob B on Stack Overflow See other posts from Stack Overflow or by Rob B
Published on 2010-04-07T16:13:47Z Indexed on 2010/04/07 18:03 UTC
Read the original article Hit count: 313

Filed under:
|

Successfully used jquery-infinite-carousel in the past but for my current project I need it to loop forever AND also jump 3 items at a time. Example of how it works jumping 1 at a time here.

jQuery.fn.carousel = function(previous, next, options){
var sliderList = jQuery(this).children()[0];

if (sliderList) {
    var increment = jQuery(sliderList).children().outerWidth("true"),

    elmnts = jQuery(sliderList).children(),
    numElmts = elmnts.length,
    sizeFirstElmnt = increment,
    shownInViewport = Math.round(jQuery(this).width() / sizeFirstElmnt),
    firstElementOnViewPort = 1,
    isAnimating = false;

    //console.log("increment = " + increment);
    //console.log("numElmts = " + numElmts);
    //console.log("shownInViewport = " + shownInViewport);

    for (i = 0; i < shownInViewport; i++) {
        jQuery(sliderList).css('width',(numElmts+shownInViewport)*increment + increment + "px");
        jQuery(sliderList).append(jQuery(elmnts[i]).clone());
    }

    jQuery(previous).click(function(event){
        if (!isAnimating) {
            if (firstElementOnViewPort == 1) {
                jQuery(sliderList).css('left', "-" + numElmts * sizeFirstElmnt + "px");
                firstElementOnViewPort = numElmts;
                console.log("firstElementOnViewPort = " + firstElementOnViewPort);
            }
            else {
                firstElementOnViewPort--;
            }

            jQuery(sliderList).animate({
                left: "+=" + increment,
                y: 0,
                queue: true
            }, "swing", function(){isAnimating = false;});
            isAnimating = true;
        }

    });

    jQuery(next).click(function(event){
        if (!isAnimating) {
            if (firstElementOnViewPort > numElmts) {
                firstElementOnViewPort = 2;
                jQuery(sliderList).css('left', "0px");
            }
            else {
                firstElementOnViewPort++;
            }
            jQuery(sliderList).animate({
                left: "-=" + (increment),
                y: 0,
                queue: true
            }, "swing", function(){isAnimating = false;});
            isAnimating = true;
        }
    });
}

};

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about carousel