【Swiper】1つのページに2個以上(複数)のスライダーを設置する方法

• Swiperを2個設置したら上手く動かない
• 1個だけなら動いていたのに…

この記事ではそんな疑問にお答えします。

以前私はSwiperで同一ページ内に複数のスライダーを設置したとき意図通りに動かない事態に遭遇し、解決まで数時間を要しました。

そんな私がたどり着いた解決方法をご紹介します。

この記事で複数のスライダーを上手く設置できること、間違いなしです！

同一ページに複数のスライダーをswiperで設置する方法

この記事では以下のような複数のスライダーを設定する方法を解説します。

複数スライダーの実装に必要なHTMLコード

HTMLはこちら。

<!-- 1個目 -->
<!-- swiper 必須・名称変更不可 -->
<div class="swiper swiper1">
  <!-- swiper-wrapper 必須・名称変更不可 -->
  <div class="swiper-wrapper">
    <!-- swiper-slide 必須・名称変更不可 -->
    <div class="swiper-slide"><p>スライド1</p></div>
    <div class="swiper-slide"><p>スライド2</p></div>
    <div class="swiper-slide"><p>スライド3</p></div>
  </div>
  <!-- ページネーション -->
  <div class="swiper-pagination swiper-pagination1"></div>
  <!-- ナビゲーションボタン -->
  <div class="swiper-button-prev swiper-button-prev1"></div>
  <div class="swiper-button-next swiper-button-next1"></div>
  <!-- スクロールバー -->
  <div class="swiper-scrollbar swiper-scrollbar1"></div>
</div>

<!-- 2個目 -->
<!-- swiper 必須・名称変更不可 -->
<div class="swiper swiper2">
  <!-- swiper-wrapper 必須・名称変更不可 -->
  <div class="swiper-wrapper">
    <!-- swiper-slide 必須・名称変更不可 -->
    <div class="swiper-slide"><p>スライド1</p></div>
    <div class="swiper-slide"><p>スライド2</p></div>
    <div class="swiper-slide"><p>スライド3</p></div>
  </div>
  <!-- ページネーション -->
  <div class="swiper-pagination swiper-pagination2"></div>
  <!-- ナビゲーションボタン -->
  <div class="swiper-button-prev swiper-button-prev2"></div>
  <div class="swiper-button-next swiper-button-next2"></div>
  <!-- スクロールバー -->
  <div class="swiper-scrollbar swiper-scrollbar2"></div>
</div>

JavaScriptによるSwiperの初期化

JavaScriptはこちらです。

const swiper = new Swiper(".swiper1", {
  pagination: { // ページネーション
    el: '.swiper-pagination1',
    clickable: true, // ページネーションをクリック可能に
  },
  navigation: { // ナビゲーションボタン
    nextEl: ".swiper-button-next1",
    prevEl: ".swiper-button-prev1"
  },
  scrollbar: { // スクロールバー
    el: ".swiper-scrollbar1"
  }
});

const swiper= new Swiper(".swiper2", {
  pagination: { // ページネーション
    el: '.swiper-pagination2',
    clickable: true, // ページネーションをクリック可能に
  },
  navigation: { // ナビゲーションボタン
    nextEl: ".swiper-button-next2",
    prevEl: ".swiper-button-prev2"
  },
  scrollbar: { // スクロールバー
    el: ".swiper-scrollbar2"
  }
});

実装時の注意点とよくある失敗例

特に注意が必要な点は以下の2点です。

• .swiper、.swiper-pagination、swiper-button-prevなどはクラス名を変更しない
• スライダー間では異なるクラス名にする

上記の注意点を守るため、各要素には必須のクラス名とオリジナルのクラス名の2つを付けています。

オリジナルのクラス名は任意でいいですが、私は必須クラス名+数字で記載しています。

<div class="swiper swiper1">

これなら2つの注意点を守りつつ、クラス名を付けるのも楽だと思います。

JavaScriptでは、それぞれのオリジナルのクラス名に対して記載します。

失敗例

私がしてしまった失敗例をご紹介します。
（こちらのコードは真似しないで下さい！）

  <div class="swiper swiper1">
    <!-- swiper-wrapper 必須・名称変更不可 -->
    <div class="swiper-wrapper">
      <!-- swiper-slide 必須・名称変更不可 -->
      <div class="swiper-slide" style="height: 100px;">スライド1</div>
      <div class="swiper-slide" style="height: 100px;">スライド2</div>
      <div class="swiper-slide" style="height: 100px;">スライド3</div>
    </div>
    <!-- ページネーション -->
    <div class="swiper-pagination"></div>
    <!-- ナビゲーションボタン(左右矢印) -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

  <div class="swiper swiper2">
    <!-- swiper-wrapper 必須・名称変更不可 -->
    <div class="swiper-wrapper">
      <!-- swiper-slide 必須・名称変更不可 -->
      <div class="swiper-slide" style="height: 100px;">スライド1</div>
      <div class="swiper-slide" style="height: 100px;">スライド2</div>
      <div class="swiper-slide" style="height: 100px;">スライド3</div>
    </div>
    <!-- ページネーション -->
    <div class="swiper-pagination2"></div>
    <!-- ナビゲーションボタン(左右矢印) -->
    <div class="swiper-button-prev2"></div>
    <div class="swiper-button-next2"></div>
  </div>

.swiperは残していますが、ページネーションやナビゲーションボタンは.swiper-pagination2や.swiper-button-prev2となっていて、必須クラス名がなくなっています。

必須クラス名は必ず残すようにしましょう。

複数スライダー設置のポイントまとめ

今回はSwiperで複数スライダーを設置する方法を解説しました。

SwiperはjQuery要らずで実装できる便利なスライダー実装ツールなので、是非活用してみて下さい。

もしこの記事が役に立ったと感じていただけた方は、ぜひX（旧Twitter）やブログなどでシェアしていただけると嬉しいです。

最後までお読みいただき、ありがとうございました！