カルーセルで画像を切り替える動きを付けるのに、slick.js というとても便利なライブラリがあります。
slick の便利な機能として、メイン画像とサムネイル画像を用意し、メイン画像の切り替えに合わせてサムネイル画像をスライドさせる機能があります。
しかしながこの機能、サムネイル画像の数が多ければ問題ないのですが、数が少なく slidesToShow
オプションの数と同数かそれ以下のとき、メイン画像が切り替わるとサムネイルが左にスライドしていって余白が生まれてしまいます。
サムネイル画像が slidesToShow
より少ないと左右のスライド用のコピー画像が作られないのが原因のようで、これを解決するために、メイン画像が切り替わる際にサムネイル画像を再表示することで、左にスライドするアニメーションをキャンセルさせることにしました。
ただ再表示は slickSetOption
メソッドだけのようだったため、適当なオプションを設定するようにしました。
メイン画像、サムネイル画像の HTML は
<div class="slick-img"> <div><img src="./img/img01.jpg" alt=""></div> <div><img src="./img/img02.jpg" alt=""></div> <div><img src="./img/img03.jpg" alt=""></div> </div> <div class="slick-thumbnail"> <div class="slick-thumbnail_item"><img src="./img/img01_thumb.jpg" alt=""></div> <div class="slick-thumbnail_item"><img src="./img/img02_thumb.jpg" alt=""></div> <div class="slick-thumbnail_item"><img src="./img/img03_thumb.jpg" alt=""></div> </div>
といった感じで、JavaScript は次のようになります。
$('.slick-img').on('beforeChange', function(event, slick, currentSlide, nextSlide){ if ($('.slick-thumbnail .slick-thumbnail-item').length < 4) { $('.slick-thumbnail').slick('slickSetOption', 'centerMode', true, true); } });
メイン画像とサムネイル画像の切り替えを連動しているとき、相手を切り替えるときはどうやら beforeChange
イベント内で実行されているようなので、このイベントに割り込んで、更にサムネイル画像が slidesToShow
以下のときに slickSetOption
メソッドでサムネイル画像領域をリフレッシュしています。
実際のデモは Github にアップしましたので、そちらを参考にしてください。
https://github.com/gakuya/slick.js_thumbnail-demo
しかしこの動作は標準で用意しておいて欲しいような気もしますね…。
1件のコメント
テストテスト · 10月 10, 2019 11:15 am
記事にしていただいてありがとうございます。
似たような箇所で詰まっていたのですが、無事解決いたしました。
デモをあげていただいていたので、すごくわかりやすかったです!