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

Question

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

这是我到目前为止 - 它适用于第一张幻灯片，但它卡在第二张幻灯片。 该错误对我来说并不是那么有用：“未捕获的TypeError：无法读取属性'添加'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>