光滑的轮播单个幻灯片持续时间答案

【问题标题】：slick carousel individual slide duration光滑的轮播单个幻灯片持续时间
【发布时间】：2016-02-18 18:36:31
【问题描述】：

寻找一种使用光滑轮播的方法，并能够在单个幻灯片的基础上更改幻灯片的显示时间。

如果我解释得不好，假设我有 5 张幻灯片。我希望能够定义幻灯片 5 的显示，幻灯片 2 的显示 10 秒，幻灯片 3 的 7 秒等...

参考：http://kenwheeler.github.io/slick/

【问题讨论】：

【解决方案1】：

我一直在寻找同样的东西，但由于我没有找到设置单个幻灯片持续时间的任何答案，我使用递归函数构建它，该函数在超时后调用“slickNext”。每张幻灯片的持续时间存储在数据属性中，然后我将所有持续时间保存在列表中。

var durationList = $('.slider__item').map(function(index, item) {
    return item.getAttribute('data-time');
});

var slideIndex = 0;
var changeSlide = function(timing) {
    setTimeout(function() {
        if (timing !== 0) slider.slick('slickNext');
        if (slideIndex >= durationList.length) slideIndex = 0; //Start from beginning?
        changeSlide(durationList[slideIndex++]); //Calls itself with duration for next slide
    }, timing);
}

changeSlide(0);

查看完整示例：http://codepen.io/calsal/pen/rLwydX

【讨论】：

谢谢！
简单而聪明的解决方案！谢谢你，@Casal。
此解决方案存在小问题。使用箭头和手动切换当前索引位置时会中断。我会提议使用 slick 方法slider.slick('slickCurrentSlide') 获取当前索引。也不需要映射所有幻灯片，只需更改下一张幻灯片：changeSlide(slider.find('.slick-slide')[slider.slick('slickCurrentSlide')].getAttribute('data-time'));
我喜欢改进的努力，但这种解决方案效率会更低。 slider.find() 将遍历 DOM 树并在每次更改幻灯片时搜索正确的幻灯片，这与使用一次 map() 有很大不同。

【解决方案2】：

仅当您的 Slickslider 淡入下一张幻灯片时，上述接受的问题才有效。如果您使用 Slick 的默认设置，则滑块会创建克隆幻灯片，这意味着您的数据属性将放置在不同的幻灯片上，并且定时会偶尔关闭。

下面提供的代码将解决这个问题。

 /* Init slider */
if ($slider.length > 0) {
        $slider.slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            dots: true,
            arrows: false,
            speed: 1000

        });
        var activeSlides,
            currActiveSlide,
            firstSlide =  $slider.find("[data-slick-index='0']");

        $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
            activeSlides = slick.$slides;
            $.each(activeSlides, function(k, v){
                if ($(v).hasClass('slick-active')){
                    if ($(v).next().length){
                        currActiveSlide = $(v).next();
                    } else {
                        currActiveSlide = firstSlide;
                    }
                    return;
                }
            });
        });

        $slider.on('afterChange', function(event, slick){
            setTimeout(function(){
                $slider.slick('slickNext');
            }, currActiveSlide.data('time')-1000); 
        });

        // on init
        setTimeout(function(){
            $slider.slick('slickNext');
        },firstSlide.data('time'));
    }

【讨论】：

【解决方案3】：

是的。您可以使用引导轮播并根据您的要求设置“数据间隔”属性。

参考： How to change the interval time on bootstrap carousel?

【讨论】：

你错过了我说我想使用 slick 的部分......但是......我很高兴你做到了......谢谢你的帮助！！！

【解决方案4】：

你可以看看这里：https://wordpress.org/plugins/wp-slick-slider-and-image-carousel/

希望有帮助！

【讨论】：

【解决方案5】：

我更喜欢使用 slider.slick('slickCurrentSlide') 来获取当前幻灯片位置，而不是使用增量计数器。这也将排除使用箭头和幻灯片之间手动切换时的问题。而且幻灯片也不需要使用地图。

var changeSlide = function(timing) {
  setTimeout(function() {
    if (timing !== 0) {
      slider.slick('slickNext');
    }
    changeSlide(slider.find('.slick-slide')[slider.slick('slickCurrentSlide')].getAttribute('data-time'));
  }, timing);
}
changeSlide(0);

【讨论】：

【解决方案6】：

我修复了上面的代码https://stackoverflow.com/a/45593522/2931874 修复的问题是 上一张幻灯片 时间错误，因为代码只是设置了下一张幻灯片的持续时间。重要更正是 clearInterval，在我们用滑动或箭头更改幻灯片之前，一切正常。所以我删除了上一个间隔。

let intervalId = 0;
    if ($slider.length > 0) {
        $slider.slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            dots: false,
            speed: 1000
        });

        var activeSlides,
            currActiveSlide,
            firstSlide = $slider.find("[data-slick-index='0']");

        $slider.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
            currActiveSlide = slick.$slides.eq(nextSlide);
        });

        $slider.on('afterChange', function (event, slick) {
            clearInterval(intervalId);
            intervalId = setTimeout(function () {
                $slider.slick('slickNext');
            }, currActiveSlide.data('time') - 1000);
        });

        // on init
        intervalId = setTimeout(function () {
            $slider.slick('slickNext');
        }, firstSlide.data('time'));
    }

【讨论】：