Swiper 同一ページに複数のサムネイル付きスライダーを設置する方法
同一ページに、サムネイル付きスライダーを複数設置したいことはないでしょうか。
1つ1つのスライダーに異なるクラス名を指定すれば実現可能ですが、これだとJavaScriptの記述が多くなってしまいます。
今回はJavaScriptをシンプルで簡単なコードにした実装方法について紹介します。
サムネイル付きスライダーのサンプル
次のサムネイル付きスライダーのサンプルをご覧ください。
メインエリアのスライダーは左右の矢印でスライダーを操作することができます。またサムネイルをクリックすると、メインエリアの画像を切り替えることができます。
続いてサンプルのコードについて解説していきます。
HTMLの記述について
<div class="container js-swiper">
<div class="swiper js-swiper-main">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper js-swiper-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
</div>
</div>
</div>
<!-- container -->
<div class="container js-swiper">
<div class="swiper js-swiper-main">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper js-swiper-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
</div>
</div>
</div>
<!-- container -->
<div class="container js-swiper">
<div class="swiper js-swiper-main">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper js-swiper-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
<div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
</div>
</div>
</div>
<!-- container -->
基本的なHTMLの記述方法は、Swiperの公式サイトに書いてある通りになります。
サムネイル付きのスライダーは、メインスライダーとサムネイルが連動するように、2つのスライダーをセットで設置する必要があります。
このセットにしたスライダーを「container」クラスで囲みます。
JavaScriptで操作するタグには「js-〇〇」というクラス名を付けています。
あとは同一ページにスライダーを複数設置するので、同じコードを複製します。
CSSの記述について
img{
width: 100%;
height: auto;
}
.container{
margin: 0 0 20px;
}
/* 選択されているサムネイルを透過 */
.swiper-slide-thumb-active{
opacity: .6;
}
CSSでは選択中のサムネイルに付与されるクラス「swiper-slide-thumb-active」に、透過するプロパティを設定してます。
JavaScriptの記述について
//要素を全て取得
const sliders = document.querySelectorAll('.js-swiper');
//繰り返し処理
sliders.forEach((slider) => {
//要素を取得
const thumbs = slider.querySelector('.js-swiper-thumbs'),
main = slider.querySelector('.js-swiper-main');
//サムネイルスライダー
const swiperThumbs = new Swiper(thumbs, {
loop: true,
spaceBetween: 2,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
});
//メインイルスライダー
const swiperMain = new Swiper(main, {
loop: true,
spaceBetween: 10,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiperThumbs,
},
});
});
重要なところだけ解説します。
const sliders = document.querySelectorAll(‘.js-swiper’);
メインスライダーとサムネイルを囲んでいる「js-swiper」を全て取得して「sliders」変数に格納します。
sliders.forEach((slider) => {});
「sliders」変数を「forEach」で要素の数だけ処理します。
const thumbs = slider.querySelector(‘.js-swiper-thumbs’),
main = slider.querySelector(‘.js-swiper-main’);
「forEach」内で、サムネイルの「js-swiper-thumbs」と、メインスライダーの「js-swiper-main」を変数に格納します。
あとは、メインスライダーとサムネイルの「new Swiper」に変数の値を割り当ててます。
スライダーのオプション設定に関しては、公式サイトに書いてある通りの記述なので、特に複雑なことはしておりません。
以上でサムネイル付きスライダーを同一ページに複数設置することができます。
まとめ
いかがだったでしょうか。
基本的なJavaScriptのメソッドを利用することで実装することができました。
よかったら試してみてください。