Swiperスライダーを複数設置する場合の注意点
WEBサイトにSwiperスライダーを使用する時、ファーストビュー、実績紹介のようにSwiperを複数設置する機会があるかと思います。
その場合、コードはどうすればいい？そのまま設置しても壊れない？と不安になりますが、数点だけ気を付ければ大丈夫です。
今回はその注意点に関して解説していきたいと思います。
目次
Swiperスライダーを複数設置する場合の注意点
- constの名前を分ける
- それぞれ別の親要素で
.swiperを指定する - pagination:、navigation:に必ず別の親要素を指定
コード
以下はメインビジュアルスライダーと採用情報スライダーを設置した時の例です。
まず、constの名前を付け、それぞれ別の親要素で .swiper を指定しましょう。
const mvSwiper = new Swiper(".mv .swiper", { ... });// メインビジュアル
const recruitSwiper = new Swiper(".recruit .swiper", { ... });// 採用情報constの後のmvSwiperなどの部分は変更可能です。
役割ベースで命名すると後で見返した時に分かりやすいのでおすすめです。
オプションがほぼ同じなら共通化してもOK
const baseOptions = { で共通化するとより保守しやすいです。
// 共通の動き
const baseOptions = {
loop: true,
effect: "fade",
slidesPerView: 1,
spaceBetween: 0,
autoHeight: true,
speed: 2000,
};
// メインビジュアル
const mvSwiper = new Swiper(".mv .swiper", {
...baseOptions,
pagination: {
el: ".mv .swiper-pagination",
clickable: true,
},
});
// 採用情報
const recruitSwiper = new Swiper(".recruit .swiper", {
...baseOptions,
pagination: {
el: ".recruit .swiper-pagination",
clickable: true,
},
});ここも別の親要素で設定する必要があります。
共通クラスにするとどれか1つしか効かない or 全部連動することがあるがあるので注意です。
必ず以下のように、前に親クラスを設定しましょう。
pagination: {
el: ".mv .swiper-pagination",
}【もっと増える予定なら】同じ構造のSwiperを量産する方法
この書き方が向いてるケース
- 同じデザインのスライダーを複数使う
- WordPressでループ表示してる
- 今後スライダーが増える予定
デザインが全く同じ構造の複数のSwiperを設置する場合はこちらの方法がおすすめ。
HTML構造が同じなら querySelectorAll を使って一括で初期化できます。
HTML（例）
<div class="js-swiper">
<div class="swiper">
...
</div>
<div class="swiper-pagination"></div>
</div>
<div class="js-swiper">
<div class="swiper">
...
</div>
<div class="swiper-pagination"></div>
</div>JavaScript
const swipers = document.querySelectorAll('.js-swiper');
swipers.forEach((el) => {
new Swiper(el.querySelector('.swiper'), {
loop: true,
effect: "fade",
slidesPerView: 1,
spaceBetween: 0,
autoHeight: true,
speed: 2000,
pagination: {
el: el.querySelector('.swiper-pagination'),
clickable: true,
},
});
});ポイント解説
親要素ごとにループさせる
document.querySelectorAll('.js-swiper')ここでSwiper1個分の「まとまり」を取得します。
el.querySelector を使うのが重要
el.querySelector('.swiper')
el.querySelector('.swiper-pagination')ページ全体の中から、最初に見つかった .swiper を1個だけ取るという処理をしています。
この処理があることでループの中でこのような処理がされます。
- 1回目 → Aを取得
- 2回目 → Bを取得
それぞれのSwiperをちゃんと取れるので、以下のバグを防げます。
- ページネーションが1個しか動かない
- 変な連動する
- 最後のSwiperだけ動く
最初の方法では、Swiperごとにそれぞれ別の親要素で .swiper を指定するをやっていましたが、
今回の量産スライダーの場合、それを一括でやっているというイメージです。
まとめ
今回はSwiperのSwiperスライダーを複数設置する場合の注意点について解説しました。
複数スライダーがある場合は、デザインをしっかり確認し、どのパターンで実装するか慎重に見分けましょう。
- constで名前分けが必要
- new Swiper、pagination:、navigation:には親classを必ず設定
これさえ気を付ければバグも防げます。