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 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的位置参数如下：

选项名称（为此，请参阅可用的settings/option/config of the plugin）
您要分配的值 - 在这种情况下，我们只是根据索引从ImagePauses数组中提取值
布尔值，表示是否需要刷新用户界面。当您只是调整自动播放速度时，我不认为用户界面会刷新，因此false将是一个安全的选择，但我在我的示例中使用true来验证您的设置。

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

＆＃13;

$(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);
  });

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

您还可以查看现在有效的修改过的小提琴：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>

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

2 个答案: