【slick.js】最初の1枚目だけ切り替わりが早い時の対処方法

普段はあまり気にならないのですが、
自動で切り替わるスライダーを実装した時に

• 最初の1枚目だけ切り替わるのが早く、コピーが読めない。
• 2周目以降は切り替わる速さは問題ない

といった場合の対処方法を説明します。

##beforeChangeとslickSetOptionを使う

autoplaySpeedの初期値には 指定したいautoplaySpeedの値 + speedの値 を指定。
1枚目以外のスライドに切り替わったタイミングで slick('slickSetOption', 'autoplaySpeed', 8000, true) のように指定。

$slider.slick({
  infinite: true,
  fade: true,
  speed: 2000,
  autoplay: true,
  autoplaySpeed: 10000,
})

$slider.on('beforeChange',function(event, slick, currentSlide, nextSlide){
  if(nextSlide > 0 ) {
    $slider.slick('slickSetOption', 'autoplaySpeed', 8000, true)
  }
})

○枚目だけ切り替わる時間を変更したい場合

〇枚目だけ切り替わる時間を変更したいというときは、
第4引数の nextSlide をうまく使えば実装可能です。
今回は1枚目だけ切り替え速度を遅くするというパターンです。

$slider.slick({
  infinite: true,
  fade: true,
  speed: 2000,
  autoplay: true,
  autoplaySpeed: 10000, //1周目のスライド1枚目
});

$slider.on('beforeChange',function(event, slick, currentSlide, nextSlide){
  if(nextSlide > 0) { //スライド1枚目以外
    $slider.slick('slickSetOption', 'autoplaySpeed', 5000, true);
  } else { //2周目以降のスライド1枚目
    $slider.slick('slickSetOption', 'autoplaySpeed', 8000, true);
  }
});

あまり遭遇する機会もないかもですが、slick.js以外のライブラリでも考え方は同じなので、遭遇された方は一度お試しください。