6666666

menu

BLOG

ブログ

Slick.jsでスライドごとに表示する秒数(autoplaySpeed)を変更する方法

HTML

Share this7Bookmark this1

Slick.jsとは

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

Slick.jsはこちら

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

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

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

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

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

サンプルコード

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

サンプルコードの解説

1-4行目

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

5行目

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

6-19行目

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

やってみた感想

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

この記事を書いた人

前田 大地

Designer / Developer

前田 大地

ウェブデザイナー。デザイン会社、システム開発会社を経てセブンシックスを設立。マーケティング、デザイン、テクノロジーに精通するオールラウンダーとして、個人事業から大企業まで多数のプロジェクトに携わる。

関連記事

ブログカテゴリ

ホームページで成果を上げる
「考え方」を、1日5分で。

ホームページ制作をご検討中のあなたに、ホームページで成果を上げる原理原則のエッセンスをお届けします。ホームページ制作前に知っておきたい「考え方」を、1日5分で手軽に身につけることができます。

無料メールセミナーはこちら

Loading...