如果滑块从头开始，则Coda-Slider不应滑回所有元素

Question

我使用的是示例2中的coda-slider，现在我不希望滑块回滚到第一个元素，如果它在最后一个元素上。我希望滑块只在正确的方向上移动(当然是从第一个元素开始)。

尾部滑块似乎使用了jQuery animate函数：

    function autoSlide() {
        if (navClicks == 0 || !settings.autoSlideStopWhenClicked) {
            if (currentPanel == panelCount) {
                var offset = 0;
                currentPanel = 1;
            } else {
                var offset = - (panelWidth*currentPanel);
                currentPanel += 1;
            };
            alterPanelHeight(currentPanel - 1);
            // Switch the current tab:
            slider.siblings('.coda-nav').find('a').removeClass('current').parents('ul').find('li:eq(' + (currentPanel - 1) + ') a').addClass('current');
            // Slide:
            $('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
            setTimeout(autoSlide,settings.autoSlideInterval);
        };
    };

animate函数中的参数是否有可能完成这项工作？

coda滑块本身只支持this parameters。

Answer 1

尾部滑块使用serialScroll。如果您不希望滑块在到达第一个元素末尾后返回到第一个元素，请打开jquery.serialScroll文件(jquery.serialScroll-1.2.1.js)，转到第37行，并将循环从“true”更改为“false”。

cycle:false, //cycle endlessly ( constant velocity )

Answer 2

我注意到这个有点老了，但我自己也遇到了这个问题，我想把我是如何做到这一点的，以防别人也需要这样做。

因此，我们需要做的第一件事是创建第一个面板的额外副本，并将其放在面板容器的末尾。这必须在我们调用容器上的codaSlider之前完成。你还需要硬编码面板的数量。所以..。

$(document).ready(function(){
    $('.panel-container .panel').eq(0).clone().appendTo('.panel-container');
    $("#main-photo-slider").codaSlider();
});

然后，将autoslide()函数更改为：

function autoSlide() {
    if (navClicks == 0 || !settings.autoSlideStopWhenClicked) {
        if (currentPanel == panelCount) {
            $('.panelContainer').css({'left':'0px'});
            var offset = 1;
            currentPanel = 2;
        } else {
            var offset = - (panelWidth*currentPanel);
            currentPanel += 1;
        };
        alterPanelHeight(currentPanel - 1);
        // Switch the current tab:
        slider.siblings('.coda-nav').find('a').removeClass('current').parents('ul').find('li:eq(' + (currentPanel - 1) + ') a').addClass('current');
        // Slide:
        $('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
        setTimeout(autoSlide,settings.autoSlideInterval);
    };
};

这应该可以工作，但它可能会产生一些不想要的结果，例如，如果你使用导航栏，它将创建一个额外的链接到最后一个图像，这将是相同的情况下，下一个/上一个按钮，当他们在最后/第一个图像…这对我来说不是问题，因为我使用了这里提到的自定义导航：http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/