Slick.js - スライド間の遅延が異なる

Question

スライドを表示するのにSlick Sliderを使用しています。私はスライド間で異なる遅延を持つことができる必要があります。

これは私が今までに持っていることです。最初のスライドでは動作しますが、2番目のスライドでは動きません。 エラーはそれほど役に立ちません： "キャッチされていない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()機能を完全に破棄することです。

1. オプション名（：slickSetOptionための位置引数は次のとおりであることを

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

   注：afterChangeイベントが発生したときに代わりに、新しい自動再生速度を設定する.slick('slickSetOptions', 'autoplaySpeed', <yourSpeed>', true)を使用することができますその場合はsettings/option/config of the pluginを参照してください）

2. に割り当てる値 - この場合、012から値を抽出するだけですインデックスベースの配列
3. UIをリフレッシュする必要があるかどうかを示すブール。私はあなたが単に自動再生速度を調整しているときにUIがリフレッシュされたとは思わないので、falseは安全な賭けになりますが、私の例ではtrueを使用しました。ここで

概念実証の例では、各afterChangeイベントが起動された後に値が設定されているか知っているように、私はconsole.log()を追加しました：

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

この作品を見てくださいフィドル私が持っている

はあなたのコード

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>