Slick.jsとは

Slick.jsは、皆さんご存知の、簡単に設置できてレスポンシブ対応している便利なスライダーです。いろいろとカスタマイズできるので、あらゆる要件をカバーできる汎用性の高いスライダーでもあります。

Slick.jsはこちら

「ねえ、3スライド目だけ秒数を長くできない？」

通常、スライド1つあたりの表示させる秒数は「autoplaySpeed」で指定します。ただし、個々のスライドごとに秒数を指定することはできません。全てのスライドが同じ秒数で切り替わります。

でも、案件によっては、スライドごとに秒数を指定したいといった要望が出ることもあるでしょう。そんなとき、どうしたらよいでしょうか。別のjsを使う？クライアントにあきらめてもらう？それとも、自分でゼロから作る？

いえいえ、Slick.jsのイベントを利用して動的にautoplaySpeedを変化させれば実現可能です！

今回は、各スライドごとに表示する秒数を指定する方法を紹介したいと思います。

サンプルコード

個々のスライドごとに秒数を指定するコードは、こんな感じです。Slickそのものの使い方は省略しますので、分からなかったら自分で調べてね。

$(".element").slick({
  autoplay: true,
  autoplaySpeed: 7000 // 最初のスライドの秒数
})
.on("afterChange", function(event, slick, currentSlide, nextSlide) {
  switch (currentSlide){
    case 0:
      // 1枚目のスライド
      $(this).slick("slickSetOption", "autoplaySpeed", 7000);
      break;
    case 3:
      // ４枚目のスライド
      $(this).slick("slickSetOption", "autoplaySpeed", 10000);
      break;
    default:
      // その他のスライド
      $(this).slick("slickSetOption", "autoplaySpeed", 3500);
      break;
  }
});

サンプルコードの解説

1-4行目

まずは普通にSlickを実行します。ここで、最初のスライドの表示秒数（autoplaySpeed）を設定しておきます。

5行目

「afterChange」を使って、スライドが切り替わったタイミングで実行する処理を登録します。スライドが切り替わる前、つまり、最初にスライダーが表示された瞬間には実行されません。

6-19行目

現在のスライド番号は、変数「currentSlide」に入ります。これをswitch文で分岐させて、各スライドごとに異なるautoplaySpeedを反映させます。スライド番号は、0からはじまるので数え間違いにご注意を。

やってみた感想

やってみると、とっても簡単。でも、やる前は、調べてもぜんぜん情報が見つからなくて、あるのは絶望だけでした。ほんっと、コーディングって毎回どん底からスタートするよね！・・・終わってみて冷静に考えると、特定のスライドだけ秒数を変えるって、そんなニーズはそもそも存在するのだろうか、、、まあ、それは考えないようにしよう。