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

Question

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

如果我解释不好，假设我有 5 张幻灯片。 我希望能够定义第 1 张幻灯片的显示 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

上述接受的问题仅在您的光滑滑块淡入下一张幻灯片时才有效。如果使用 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 3

是。您可以使用引导轮播并根据需要设置"数据间隔"属性。

指：如何更改引导轮播上的间隔时间？

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

Answer 6

我修复了上面的代码 https://stackoverflow.com/a/45593522/2931874修复的问题是上一张幻灯片的时间错误，因为代码只是将下一张幻灯片设置为持续时间。和重要的更正是明确的间隔，一切都正确工作，直到我们使用滑动或箭头更改幻灯片。所以我删除了上一个间隔。

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

Answer 7

尝试了这些答案，对我不起作用。这确实...

我想要实现的是，第一张幻灯片的显示时间应该比其他幻灯片更长。因此，您可以为所有幻灯片设置默认持续时间，但我想在第一张幻灯片中显示视频，所以我需要它，所以停留 12 秒，然后对于其他幻灯片来说将是长/无聊的，应该只显示 7 秒。

此外，我只需要它为第一张幻灯片执行此操作，因为视频然后停止并显示静态图像。但我想该示例可以扩展为相当容易地为每张幻灯片提供自定义幻灯片放映时间。

$(document).ready(function(){
    var intervalId = 0;
    $slider = $('#homeslider');
    
    var myslider, currentActiveSlide, defaultSpeed = 7000, initSpeed;
    var firstTime = true;
    
    if($('.firstSlide').data('slideshowtime') !== 0 && $('.firstSlide').data('slideshowtime')*1000 != defaultSpeed) {
        initSpeed = $('.firstSlide').data('slideshowtime')*1000;
        firstTime = false;
    } else {
        initSpeed = defaultSpeed;
    }
    
    $slider.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
        currentActiveSlide = slick.$slides.eq(nextSlide);
        
        if(currentActiveSlide.find('.sliderContent').data('slideshowtime') != 0 && firstTime) {
            myslider[0].slick.autoPlayClear;
            myslider[0].slick.options.autoplaySpeed = currentActiveSlide.find('.sliderContent').data('slideshowtime') * 1000;
            myslider[0].slick.autoPlay;
            firstTime = false;
        } else {
            if(myslider[0].slick.options.autoplaySpeed != defaultSpeed) {
                myslider[0].slick.autoPlayClear;
                myslider[0].slick.options.autoplaySpeed = defaultSpeed;
                myslider[0].slick.autoPlay;
            }
        }
    });
    
    myslider = $slider.slick({
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: initSpeed,
        centerMode: false,
        variableWidth: false,
        prevArrow: '<button type="button" class="slick-prev"></button>',
        nextArrow: '<button type="button" class="slick-next"></button>'
    }); 
});
<!-- the html -->
<div id="homeslider">
    <div>
        <div class="firstSlide sliderContent" data-slideshowtime="0"></div>
    </div>
    <!-- more slides -->
</div>