slider.jsでサムネ付きスライダーを作る

slider.jsでサムネ付きスライダーを作る

今回は、slider.jsでECサイトなどでよく見かける小さい画像をクリックしたら、大きな画像が表示され、さらに大きい画像をクリックするとポップアップで画像が表示される機能を実装したいと思います。

サムネ生成

sliderには、customPagingというオプションがあり$(slider.$slides[i])で各スライダーのjqueryオブジェクトを取得できるようです。

また、

で空にできます。

画像のポップアップ

画像のポップアップ機能は、適当にbaguetteBoxで実装します。
自分の使いやすいライブラリを利用すればいいと思います。

サンプルコード

HTML

 

CSS

 

js

出力結果