光滑的旋转木马个人幻灯片持续时间

Question

正在寻找一种使用 slick carousel 并能够更改幻灯片在单个幻灯片上显示的时间量的方法。

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

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

Answer 1

Yes.You 可以使用 bootstrap 轮播并根据您的要求设置 "data-interval" 属性。

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

Answer 2

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

希望对您有所帮助！

Answer 3

我一直在寻找同样的东西，但由于我没有找到设置单个幻灯片持续时间的任何答案，所以我使用递归函数构建它，该函数在超时后调用 '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

Answer 4

以上已接受的问题仅在您的 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'));
    }

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

Answer 6

我修改了上面的代码已修复的问题是 上一张幻灯片 的时间错误，因为代码只是将下一张幻灯片设置为持续时间。重要更正是 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'));
    }

光滑的旋转木马个人幻灯片持续时间

slick carousel individual slide duration

jquery

carousel

slick.js