Posted at

【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以外のライブラリでも考え方は同じなので、遭遇された方は一度お試しください。