如果滑块从头开始，Coda-Slider 不应滑过所有元素答案

【问题标题】：Coda-Slider should not slide back over all elements if the slider starts from the beginning如果滑块从头开始，Coda-Slider 不应滑过所有元素
【发布时间】：2011-12-18 19:38:36
【问题描述】：

我正在使用coda-slider，就像示例 2 中一样。现在我不希望滑块在最后一个元素上后退到第一个元素的行为。我希望滑块只向正确的方向移动（当然从第一个元素开始）。

尾声滑块似乎使用了 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 函数中的参数是否有可能完成这项工作？

尾声滑块本身只支持this parameters。

【问题讨论】：

为了确保我理解正确，您只希望滑块从第一个元素移动到最后一个元素而不重新启动？
它应该重新启动！但它应该是朝着正确方向的无限循环。现在他从第一个元素转到第五个元素，然后快速向后滑动（5,4,3,2,1）并再次开始正常滑动。我只想要一个正常的滑动1,2,3,4,5,1,2,3,4,5,1,...
所以你只是不想在重启时看到过渡？
正确。而不是这个过渡，我想要幻灯片到下一个项目（在这种情况下是第一个元素）。

标签： javascript jquery slider coda-slider

【解决方案1】：

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

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

【讨论】：

【解决方案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);
    };
};

这应该可以，但它可能会产生一些不希望的结果，例如，如果您使用导航栏，它会创建一个指向最后一个图像的额外链接，这与 Next/Prev 按钮结束时的情况相同最后一张/第一张图片...这对我来说不是问题，因为我使用了这里讨论的自定义导航： http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

【讨论】：