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

Question

我正在使用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在这里.

有什么想法有什么不对？

Answer 1

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

SlickJS 公开了一个名为的方法slickSetOptions,允许您随时修改设置.

你可以做的是modifyDelay()完全抛弃这个功能.相反,当afterChange事件被触发时,您可以使用.slick('slickSetOptions', 'autoplaySpeed', <yourSpeed>', true)设置新的自动播放速度:

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

请注意,位置参数slickSetOption如下:

1. 选项名称(为此,请参阅插件的可用设置/选项/配置)
2. 要分配的值 - 在这种情况下,我们只是ImagePauses根据索引从数组中提取值
3. Boolean,指示是否需要刷新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="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></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/