slickで実装、サムネイル付きスライダー

スライダーは魅力的なUIだ。多くの画像、多くのコンテンツ、多くの多くをシンプルに、わかりやすく、スタイリッシュ、それでいて使いやすさも損なわずに見せたいとき、それは力強い協力者になる。そしてそこにサムネイルが添えてあったなら、さらに魅力的になるだろう。

はじめに

私はslickが好きだ。豊富なオプションにより高いカスタマイズ性を有していながら、シンプルで、何より今やマストなレスポンシブにもおどろくほど柔軟に対応できる。また、公式のデモが充実しているから、ほとんどの場合はこれを少しいじくるだけでいい。

しかし、サムネイル付きスライダーはそこにいなかった。正確にはサムネイルスライダーのデモならある。ただ、私が求めているのは純粋なサムネイルのリストとスライダーが連動するデモで、残念なことにそれはどこにも見当たらなかった。(もし前者のような実装をしたいと思っているのなら、公式にあるデモの「Slider Syncing」が役に立つだろう。)

私はしょぼくれた。デスクに常備する愛しいチョコレートたちで悲しみを癒すより他にないと思ったが、幸いにも私の繊細な胃がカカオの海に溺れる前に、私は希望に思い当たった。slickには親切で心強いオプションたちの他にも、すばらしいメソッドやイベントたちがいる。

彼らに手伝ってもらえば、望むものはきっとすぐ手に入るはずだ。

完成デモ

以降の解説はslick導入済みの環境を前提にしている。もしもまだ自分のサイトにslickを入れていないのならば、公式のusageを参考に準備を済ませてほしい。心配いらない。slick.js、slick.css、それからjQuery。これらを読み込ませれば、すぐだ。

スライドとサムネイルのソースを用意する

スライダーを設定する前のスライドが積み木になるのは自然の摂理だ。仕方ない。サムネイルは思うがままに作り込むのもいいし、自然の摂理に任せてもいい。私は横並びのシンプルなものを好んでいる。

カレント表示のクラスを設定しているが、これは最後に用意したオマケのための下準備だから、不要であれば除いて構わない。

スライダーを設定する

さあ、slickを呼び出そう。これで積み木とおさらばできる。オプションは自分好みで構わないが、おすすめはデモの通り。とてもシンプルでいい感じ。

サムネイルとスライダーを連動させる

仕組みは単純。$.index() で何番目のサムネイルがクリックされたかを取得し、slickGoToメソッドに引き渡す。SlickGoToメソッドは第二引数に渡された数値と一致する順序のスライドをナビゲートしてくれる。また、このメソッドは第三引数にtrueを渡すと切替時のアニメーションをオフにしてくれる。今回のような用途に最適だ。デフォルトはfalseなので、アニメーションさせたいときはこの指定を除けば良い。

これで目的は達成された。完成を祝ってチョコレートドリンクで乾杯しながら満足感に身を委ねたいところだが、実はオマケがひとつある。はじめに用意していたカレント表示用のクラス。あの子に設定を与えてあげよう。

選択したサムネイルにカレント表示をつける

今度はメソッドではなくイベントを使用する。beforeChangeイベントはスライドが切り替わる直前に発火する。ここにカレント表示用のクラスを切り替える処理を記述しよう。beforeChangeイベントには次のスライドの順序が引き渡されている。この数値を$.eq()に与えて、一致する順序のサムネイルにカレント用のクラスをつけ直す。これだけだ。

おめでとう。最高にすてきなサムネイル付きスライダーが完成した。

最後に

slickに限らず多くのjQueryプラグインは、オプションに加えてメソッドやイベントをもっていることが多い。それらを組み合わせると実装の幅は大きく、大きく広がる。シンプルな発想と公式ドキュメント、そして愛しいチョコレートはいつだって私たちの味方だ。彼らと良き友であり続けよう。それは私たちにより良い結果をもたらし続けてくれるはずだ。

追伸

チョコレートは程々に。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です