Swiperで
スライダーを複数設置するのに必要な
たった2つの決まりごと

手軽に高品質なスライダーが実装できる java script ライブラリ「Swiper」！

ここでは、「Swiper」で複数のスライダーを設置する際につまずいたので、その解決方法をまとめています。

結論から言ってしまうと、HTMLでスライダーを追加要素で囲むこと、そして初期設定で正しく指定することで解決しました。

早速、見ていきましょう！

Swiperで複数のスライダーを
設置するのに必要なもの①

「Swiper」では、1つのページに複数のスライダーを設置するには、いくつか決まり事があります。

全く同じ機能のスライダーであればスライダーを増やすだけで問題なく実装できますが、機能の違うスライダーを適当に置くだけだと、挙動がおかしくなることがあります。

「Swiper」で機能の違うスライダーを2つ以上設置する場合は、それぞれのスライダーをdiv要素で囲み、それぞれ別のclass名をつける必要があります。

以下のような感じ。

<div class="swiper-box1">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="1.png" alt=""></div>
      <div class="swiper-slide"><img src="2.png" alt=""></div>
      <div class="swiper-slide"><img src="3.png" alt=""></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</div>

<div class="swiper-box2">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="1.png" alt=""></div>
      <div class="swiper-slide"><img src="2.png" alt=""></div>
      <div class="swiper-slide"><img src="3.png" alt=""></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</div>

基本コードのclass名を変更すると正常に動かないので、追加要素でそれぞれのスライダーを判別するために必要になります。

また、1つめのスライダーはそのままで、2つめのスライダーだけを追加要素で囲む、というのは無効です。

機能の違うスライダーを設置する場合は、全てのスライダーを、ぞれぞれ追加要素で囲みましょう。

Swiperで複数のスライダーを
設置するのに必要なもの②

次に必要なのは、 java script での初期設定です。

「Swiper」で機能の違うスライダーを設置する場合は、それぞれに初期設定コードが必要になります。

ここで使っている「Swiper」の基本的な初期設定コードは以下です。

const ◯◯ = new Swiper('.swiper',{
});

それぞれの変数名（◯◯の部分）は同じにせず、個別なものにします。

また、スライダー要素の指定は、追加要素のclass名をつけることで各スライダー要素を指定します。

イメージとしては以下のような感じです。

const swiper1 = new Swiper('.swiper-box1 .swiper',{
});

const swiper2 = new Swiper('.swiper-box2 .swiper',{
});

あとは、それぞれの初期設定を書き込んでいけば完成です。

これで、「Swiper」で複数のスライダーを設置することができます。

Swiperで複数のスライダーを
設置する方法まとめ

「Swiper」で複数のスライダーを設置する場合は、HTMLでスライダーを追加要素で囲み、初期設定で追加要素のclass名をつけてスライダーを指定しましょう。

全く同じ機能のスライダーなら対応はいりませんが、機能の違ったスライダーを設置する際には必要になります。

最初はよく分からずにコードとにらめっこ状態でしたが、分かってしまえば簡単ですね！

「Swiper」で2つ以上スライダーをおくと、なんか挙動がおかしいなぁという時、ぜひ試してみてはいかがでしょうか。