Question

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

如果我没有很好地解释它，假设我有5张幻灯片。我希望能够定义幻灯片一个显示5秒，幻灯片2显示10秒，幻灯片3显示7秒等等。

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

Answer 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

Answer 2

是的。您可以使用bootstrap轮播并设置＆＃34;数据间隔＆＃34;属性根据您的要求。

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

Answer 3

以上接受的问题仅适用于您的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 4

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

希望有所帮助！

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

光滑的旋转木马个人滑动持续时间

5 个答案: