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

Question

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

这是我目前所拥有的 - 它适用于第一张幻灯片，但它卡在第二张幻灯片上。 该错误对我来说不是那么有用：“Uncaught TypeError: Cannot read property '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.

有什么想法吗？

Answer 1

你实际上是在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 的位置参数如下：

1. 选项名称（请参阅可用的settings/option/config of the plugin）
2. 您要分配的值--在这种情况下，我们只是根据索引从您的 ImagePauses 数组中提取值
3. 表示是否需要刷新 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/

Answer 2

看看这个有效的小提琴http://jsfiddle.net/vxxhnga5/8/

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

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

// Init
modifyDelay(0);

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

// Slider config
function modifyDelay(startSlide) {
  $slideshow.slick({
    initialSlide: startSlide,
    autoplay: true,
    fade: 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>