Question

我正在使用此jQuery Infinite Carousel，但与演示稍有不同，您可以在“客户成功案例”标题下看到我的用法here。

正如您将看到的那样，我已将旋转木马对中并允许在旋转木马滚动时仍然可以看到上一张图像。当轮播首次加载时，序列中的最后一个图像不会加载，因此第一个图像左侧有一个空白区域。一旦轮播返回第一张图像，最后一张图像也会短暂消失。

我自己已尝试多次修复此问题，但我的jQuery知识缺乏，脚本停止响应，是否有人知道如何获取序列中的最后一个图像以显示轮播加载时的状态而不会消失再次到达开头？感谢。

这是jQuery脚本：

    /**
 * @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;
            }
        });
    }
};

Answer 1

此插件旨在尽可能自动化，因此选项很少。我认为只有通过修改CSS才能达到你想要的效果。 #customersCarousel必须与3个项目一样大，并且如果第一个元素的左边缘没有被其左边的渐变部分隐藏，那么它应该位于第一个元素左边缘的位置。第一个项目将是列表中的第一个项目。摆脱#customersCarouselList上的右边距（它可能与自动尺寸和定位处理相冲突）。然后更改渐变图像以隐藏第一个项目的左侧和第三个项目的右侧。希望这有帮助。

如何阻止我的jQuery Infinite Carousel中的最后一张图像消失？

1 个答案: