How can I stop the last image in my jQuery Infinite Carousel from disappearing?

Question

I'm using this jQuery Infinite Carousel but in a slightly different way to the demo, you can see my usage here under the heading 'Customer Success Stories'.

As you will see I've centred the carousel and allowed for the previous image to still be visible as the carousel is scrolled. When the carousel first loads, the last image in the sequence does not load so there is a white space to the left of the first image. The last image also briefly disappears once the carousel returns to the first image.

I've attempted to fix this many times myself but my jQuery knowledge is lacking and the script just stops responding, does anybody know how I can get the last image in the sequence to show when the carousel loads and not disappear when it reaches the beginning again? Thanks.

Here is the jQuery script:

    /**
 * @author Stéphane Roucheray 
 * @extends jquery
 */


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;

        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;
                }
                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;
            }
        });
    }
};

score 0 · Accepted Answer · answered Apr 16 '12 at 20:08

This plugin is intended to be as automatic as possible, thus there is very few options. I think you can achieve what you want only by modifying your CSS. The #customersCarousel must be as large as 3 items and be positioned where the first element left edge is intended to be if it was not partially hidden by the gradient on its left. This first item will be the first item on the list. Get rid of the right margin on #customersCarouselList (it can conflict on the automatic size and positioning handling). Then change your gradient images to hide the left of the first item and the right of the third item. Hope this help.

Thanks, I presume you are the author of the script? You're correct that the margin was affecting the last image. I've adjuested some things but now the second image disappears. I don't have time to keep messing with it so this will have to do. — remondo, Apr 17 '12 at 14:09

How can I stop the last image in my jQuery Infinite Carousel from disappearing?

1 Answers1