圆滑的轮播个人幻灯片时长 [英] slick carousel individual slide duration

问题描述

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

Looking for a way to use slick carousel and be able to change the amount of time the slide is displayed on an individual slide basis.

如果我不能很好地解释它，请假设我有5张幻灯片.我希望能够定义幻灯片1的显示5s，幻灯片2的显示10s，幻灯片3的显示7s等...

In case I'm not explaining it well, assume I have 5 slides. I want to be able to define the display of slide one for 5s, slide 2 for 10s, slide 3 for 7s, etc...

ref: http://kenwheeler.github.io/slick/

推荐答案

我一直在寻找相同的东西，但是由于找不到设置单个幻灯片持续时间的任何答案，因此我使用了一个名为"slickNext"的递归函数来构建它'超时后.每张幻灯片的持续时间都存储在数据属性中，然后将所有持续时间保存在列表中.

I was looking for the same thing but since I did not find any answer to setting an individual slide duration I built it with a recursive function that calls the 'slickNext' after timeout. The duration for each slide is stored in a data-attribute and then I save all durations in a list.

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

这篇关于圆滑的轮播个人幻灯片时长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！