Jquery Slick.js-幻灯片之间的不同延迟

我用它来展示一些幻灯片。我需要能够在幻灯片之间有不同的延迟

这就是我到目前为止所做的——它适用于第一张幻灯片，但在第二张幻灯片上卡住了。 这个错误对我来说没什么用处：“uncaughttypeerror:cannotreadproperty'add'of null”-slick.min.js:17

守则：

var $slideshow = $('.slider');
var ImagePauses = [6000, 2000, 3000, 10000, 4000];

// Init
modifyDelay(0);

// Sliding settings
$slideshow.on('afterChange', function(event, slick, currentSlide) {
  modifyDelay(currentSlide);
});

// Slider config
function modifyDelay(startSlide) {
  $slideshow.slick({
    initialSlide: startSlide,
    autoplay: true,
    autoplaySpeed: ImagePauses[startSlide],
    fade: true
  });
}

---

有什么问题吗？

您实际上是在更改后创建了一个新的SlickJS实例，这可能不是您想要的。您需要的只是在每次幻灯片更改后更新slick选项，以便更改自动播放速度

SlickJS，允许您在移动中修改设置

您可以做的是完全放弃

modifyDelay（）

函数。相反，当触发

afterChange

事件时，您可以使用

.slick（'slickSetOptions'，'autoplaySpeed'，'，'true）

设置新的自动播放速度：

$slideshow.on('afterChange', function(event, slick, currentSlide) {
    $slideshow.slick('slickSetOption', 'autoplaySpeed', ImagePauses[currentSlide], true);
});

请注意，

slickSetOption

的位置参数如下所示：

选项名称（请参阅可用）

您要分配的值——在本例中，我们只是根据索引从

ImagePauses

数组中提取值

布尔值，指示是否需要刷新UI。我认为，当您只是调整自动播放速度时，UI不会刷新，因此

false

将是一个安全的选择，但我在示例中使用了

true

来验证您的设置

下面是一个概念验证示例，我添加了

console.log（）

，以便您知道在触发每个

afterChange

事件后设置了哪些值：

$（函数（）{
变量$slideshow=$（'.slider'）；
var ImagePauses=[6000,2000,3000,10000,4000]；
//初始化
$slideshow.slick({
初始幻灯片：0，
自动播放：对，
自动播放速度：图像暂停[0]，
点：错，
褪色：真的
});
//滑动设置
$slideshow.on（'afterChange'，函数（事件、滑动、当前幻灯片）{
//控制台日志，可以删除
log（'当前幻灯片：'+currentSlide+'。将速度设置为：'+ImagePauses[currentSlide]）；
//根据幻灯片索引更新自动播放速度
$slideshow.slick（'slickSetOption'，'autoplaySpeed'，ImagePauses[currentSlide]，true）；
});
});
.panel{
边框：10px实心#333；
背景：#ccc；
高度：200px；
利润率：10px；
字体大小：72px；
文本对齐：居中；
线高：200px；
}

1.
2.
3.
4.
5.
看看这把小提琴

我对你的代码做了一些小改动


var$slideshow=$（'.slider'）；
var ImagePauses=[6000,2000,3000,10000,4000]；
//初始化
修改延迟（0）；
//滑动设置
$slideshow.on（'change'，函数（事件、滑动、当前幻灯片）{
修改延迟（currentSlide）；
});
//滑块配置
功能修改延迟（startSlide）{
$slideshow.slick({
初始幻灯片：startSlide，
自动播放：对，
褪色：真的
});
}
.panel{
边框：10px实心#333；
背景：#ccc；
高度：200px；
利润率：10px；
字体大小：72px；
文本对齐：居中；
线高：200px；
}

1.
2.
3.
4.
5.
我印象深刻，伙计。我几乎放弃了这个。非常感谢。@Meek很高兴我能帮忙。我必须让您知道，目前没有隐式检查：如果
ImagePauses
数组长度小于幻灯片数量，则可能会出现错误。在设置该选项之前，只需进行简单的检查即可（您可能希望实现默认播放速度）。