Swiperを使って、同じページの中に２つや３つなど複数のスライドを設置したい。
こんにちは。
フリーランスWebコーダーの、たけちです。
コーディングの案件や勉強をしていると、デザインの中に複数のスライドが入っているケースがあると思います。
そんなとき、「Swiperを必要な数だけ設置すればいいんじゃないの？」と思うかもしれませんが、残念ながらそれだけだと上手く動作しません。
同一ページ内にSwiperを複数設置するためには、「ルール」が存在するからです。
というわけで今回は、Swiperを同じページ内に複数設置する方法を、初学者の方でもわかりやすく解説します！
なお、今回はSwiperの読み込み方や基本的な使い方は解説しませんので、必要があれば下の記事をあわせて参考にしてくださいね。
同じページ内に複数のSwiperを設置する方法
同じページ内に複数のSwiperを設置するには、次の２つの「ルール」があります。
- それぞれのSwiperに独自のクラス（またはid）をつける
- 1のクラス（id）を使って、個別にインスタンス化する
少しだけ難しい言葉が出てきましたが、これから詳しく解説するのでご安心ください。
今から１つずつ、解説しますね。
それぞれのSwiperに独自のクラス（またはid）をつける
ルールその１は、それぞれのSwiperに独自のクラスまたはidをつけることです。
Swiperを設置する場合、普通は下の「基本構文」を書きます（※見やすくするために、ページネーションや矢印などは省略してます）。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>しかし、同じページ内に複数のSwiperを設置する場合は、下のようにそれぞれのSwiperに独自のクラス（またはid）を付与しなければいけません。
「独自の」というのは「重複しない名前」という意味で、下の例では1つめのクラス名を「swiper1」、２つめを「swiper2」としました。
重複さえしなければ、自由な名前で大丈夫です。
<!-- Swiper1 -->
<div class="swiper swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide _red">Slide 1</div>
<div class="swiper-slide _blue">Slide 2</div>
<div class="swiper-slide _orange">Slide 3</div>
</div>
</div>
<!-- Swiper2 -->
<div class="swiper swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide _red">Slide 1</div>
<div class="swiper-slide _blue">Slide 2</div>
<div class="swiper-slide _orange">Slide 3</div>
</div>
</div>idをつける場合は、下のようになります。
<!-- Swiper1 -->
<div id="swiper1" class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide _red">Slide 1</div>
<div class="swiper-slide _blue">Slide 2</div>
<div class="swiper-slide _orange">Slide 3</div>
</div>
</div>
<!-- Swiper2 -->
<div id="swiper2" class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide _red">Slide 1</div>
<div class="swiper-slide _blue">Slide 2</div>
<div class="swiper-slide _orange">Slide 3</div>
</div>
</div>それぞれのクラス（id）で個別にインスタンス化する
「インスタンス化」と聞くと難しいかもしれませんが、要するにSwiperの「初期化」のことです。
Swiperを動かす際は、JavaScript内で下記の「インスタンス化」を行い、その中に様々なオプションを書くのが通例です。
const swiper = new Swiper('.swiper', {
// Swiperのオプションを記述
});同じページ内に複数のSwiperを設置する場合、下のように、先ほど付けた独自のクラス（id）を使って別々にインスタンス化を行わなければいけません。
※constに続く変数名も「独自の名前」にしてください（名前が重複するとエラーが発生しSwiperが動かなくなります）。
// Swiper1
const swiper1 = new Swiper('.swiper1', {
// swiper1のオプションを書く
});
// Swiper2
const swiper2 = new Swiper('.swiper2', {
// swiper2のオプションを書く
});クラスの場合は「.」ですが、idの場合は「#」になります。
// Swiper1
const swiper1 = new Swiper('#swiper1', {
// swiper1のオプションを書く
});
// Swiper2
const swiper2 = new Swiper('#swiper2', {
// swiper2のオプションを書く
});これで、同じページ内で２つのSwiperを独立して動かせるようになりました。
なお、２つSwiperを同時に動かしたい場合は、【Swiper】２つのスライドを連動して動かす方法という別の記事に書いていますので、参考にしてください。