jquery – Slick.js – 幻灯片之间的不同延迟

我正在使用 Slick Slider来显示一些幻灯片.我需要能够在幻灯片之间有不同的延迟.

这是我到目前为止 – 它适用于第一张幻灯片,但它被卡在第二张幻灯片上.
这个错误对我来说没那么有用：“Uncaught TypeError：无法读取属性’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
  });
}

jsFiddle here.

有什么想法有什么不对？

你实际上是在afterChange上创建一个新的SlickJS实例 – 这可能不是你想要的.您需要的只是在每次幻灯片更改后更新光滑选项,以便更改自动播放速度.

SlickJS exposes a method called slickSetOptions允许您随时修改设置.

你可以做的是完全抛弃modifyDelay()函数.相反,当触发afterChange事件时,您可以使用.slick(‘slickSetOptions’,’autoplaySpeed’,< yourSpeed>‘,true)来设置新的自动播放速度：

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

请注意,slickSetOption的位置参数如下：

>选项名称(为此,请参阅可用的settings/option/config of the plugin)
>您要分配的值 – 在这种情况下,我们只是根据索引从ImagePauses数组中提取值
>布尔值,指示是否需要刷新UI.当你只是调整自动播放速度时,我不认为UI是刷新的,所以false是一个安全的赌注,但我在我的例子中使用了true来证明你的设置.

这是一个概念验证示例,我添加了console.log(),以便您知道在每个afterChange事件被触发后设置的值：

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

  // Init
  $slideshow.slick({
    initialSlide: 0,
    autoplay: true,
    autoplaySpeed: ImagePauses[0],
    dots: false,
    fade: true
  });

  // Sliding settings
  $slideshow.on('afterChange', function(event, slick, currentSlide) {
    // Console log, can be removed
    console.log('Current slide: ' + currentSlide + '. Setting speed to: ' + ImagePauses[currentSlide]);

    // Update autoplay speed according to slide index
    $slideshow.slick('slickSetOption', 'autoplaySpeed', ImagePauses[currentSlide], true);
  });

});

.panel {
  border: 10px solid #333;
  background: #ccc;
  height: 200px;
  margin: 10px;
  font-size: 72px;
  text-align: center;
  line-height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet" />
<script src="http://img.558idc.com/uploadfile/allimg/210615/22293K922-1.jpg"></script>
<div class="slider">
  <div class="panel">1</div>
  <div class="panel">2</div>
  <div class="panel">3</div>
  <div class="panel">4</div>
  <div class="panel">5</div>
</div>

你也可以查看你现在正在修改的小提琴:) http://jsfiddle.net/teddyrised/vxxhnga5/7/