・slickで特定スライドのみ表示時間を変えることできる？
こんな疑問にお答えします。
案件によっては特定のスライドのみ、表示時間を長くしたり短くしたりする場合があります。
実はslickなら、それ簡単に実装可能です。
すぐにできるよ！
ということで、この記事では「slickで特定スライドのみ表示時間を変える」について解説していきます！
slickで特定スライドのみ表示時間を変える
【jQuery】slickの使い方｜初心者向けに解説【レスポンシブ対応】 目次
【簡単】slickで特定スライドのみ表示時間を変える【コピペOK】
そんな特定スライドのみ表示時間を変えたサンプルがこちら↓
See the Pen slick特定スライドだけ変える➀ by jito-coder (@jito-coder) on CodePen.
- 初回1枚目⇒3秒
- 2枚目⇒1秒
- それ以外⇒0.5秒
- 2週目1枚目⇒0.1秒
スライドによって表示時間が違いますよね。
やったこととしては、jQueryのコードにて特定スライドに対して秒数を指定しました↓
$(function () {
$(".test-slick").slick({
dots: true,
autoplay: true,
autoplaySpeed: 3000,
})
.on("afterChange", function(event, slick, currentSlide) {
switch (currentSlide){
case 0:
$(this).slick("slickSetOption", "autoplaySpeed", 100);
break;
case 1:
$(this).slick("slickSetOption", "autoplaySpeed", 1000);
break;
default:
$(this).slick("slickSetOption", "autoplaySpeed", 500);
break;
}
});
}); コードの重要な点がこちら↓
- 初回1枚目のスピードを指定
- 2枚目からのイベントを指定
- switch構文を使い特定スライドのスピードを指定
順に見ていきましょう。
まず下記部分に通常通り、slickの指定をします。
$(function () {
$(".test-slick").slick({
dots: true,
autoplay: true,
autoplaySpeed: 3000,
})
}); ここで記述した「autoplaySpeed」の数値が、初回スピードとなります。
つまり1週目の1番最初に表示されるスライドの初回速度です。
次に「afterChange」を使います。
ようはスライドが切替わったら～～をする。という感じ。
.on("afterChange", function(event, slick, currentSlide) {
});2枚目からのスライドのイベントをここに記述するということです。
最後にswitch構文を使い、それぞれのスライドに対してスピードを指定します。
.on("afterChange", function(event, slick, currentSlide) {
switch (currentSlide){
case 0:
$(this).slick("slickSetOption", "autoplaySpeed", 100);
break;
case 1:
$(this).slick("slickSetOption", "autoplaySpeed", 1000);
break;
default:
$(this).slick("slickSetOption", "autoplaySpeed", 500);
break;
}
});「currentSlide」に現在のスライド番号が入ります。
スライド番号は0から始まります。
つまりcase 0 が1枚目のスライドを指定。case 1 が2枚目のスライドを指定という感じですね。
1枚目のスピード（2週目を表す）↓
case 0:
$(this).slick("slickSetOption", "autoplaySpeed", 100);
break;0.1秒。
2枚目のスピード
case 1:
$(this).slick("slickSetOption", "autoplaySpeed", 1000);
break;1秒。
それ以外のスライド番号のスピード↓
default:
$(this).slick("slickSetOption", "autoplaySpeed", 500);
break;0.5秒。
つまり下記になるということです。
- 初回1枚目⇒3秒
- 2枚目⇒1秒
- それ以外⇒0.5秒
- 2週目1枚目⇒0.1秒
See the Pen slick特定スライドだけ変える➀ by jito-coder (@jito-coder) on CodePen.
【簡単】slickで特定スライドのみ表示時間を変える【コピペOK】：まとめ
- 初回1枚目のスピードを指定
- 2枚目からのイベントを指定
- switch構文を使い特定スライドのスピードを指定
特定スライドのみ表示時間を変えたい場合は試してみてね！
【解説】slickのオプション一覧【カスタマイズまとめ】 
【最新】slickのスライダー実装サンプル25選【コピペOK】
