こんにちは、ワタナベです。
急に寒くなってきたので体調管理は気をつけたいですね(;´Д｀)
今回は、Swiperで固定表示のサムネイル付きのスライダーを作成する備忘録です。
たまにスライダーのページャーを固定サムネイルにしたい時があります。
Slickだとバージョンアップしたからなのか、いつの間にかサムネイル固定が出来なくなっているっぽかったので、今回はSwiperを使用して作成してみました。
Swiperはページャーや矢印等の配置の自由度が高い＆簡単なので、そういう意味では個人的に気に入っているプラグインです。
See the Pen Untitled by Akiho (@wcaotdaenpaebne) on CodePen.
Swiperでサムネイルリスト付きのスライダーを作成する
↑の記事を参考に作成しました。ありがとうございます！
サムネイルは、jsで<div class=”thumblist”></div>内に<div class=”swiper-slide”></div>の内部のHTMLを引っ張ってきて表示させています。
そのため、<div class=”swiper-slide”></div>内に画像以外の要素があるとそれも引っ張ってきてしまうので、画像以外の要素がある場合はcssなどで画像以外の要素は非表示にします。（jsの方を直せるならそっちの方が良いかも？）
あとはcssをお好みに整えるだけでOK。簡単ですね(^^)/
欠点としては、オプションの「loop:true」を使用するとサムネイルの表示、順番がおかしくなってしまうので「loop:true」は使えない点です。
一番最後のスライドに行くと一番先頭まで一気に戻る感じに動くので、エフェクトがfade以外だと動きが気になるかもしれません。
それではまた次回。
ご閲覧ありがとうございました(*^^*)
