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

Swiperを2個設置したら上手く動かない
1個だけなら動いていたのに…
どうやって作ったらいいの?

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

この記事を読んでわかること
  • 同一ページに複数のスライダーを設置する方法(コード)
  • 同一ページに複数のスライダーを設置する際の注意点

Swiperで同一ページ内に複数のスライダーを設置したとき意図通りに動かない事態に遭遇しました。

知っているだけですぐに解決できる内容ですが、私はこれに気づかず解決まで時間が掛かりました。

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

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

この記事の著者

web制作エンジニア

伊藤 義尚

2021年よりweb制作の学習を開始し、現在1社と業務提携中

自身が学んだこと、ためになったことを発信しています

もくじ

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

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

See the Pen Untitled by 伊とう (@ito-the-typescripter) on CodePen.

ソースコード

htmlとJavaScriptのコードはこちらです。

<!-- 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>
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-paginationswiper-button-prevなどはクラス名を変更しない
  • 複数のスライダー間で異なるクラス名にする

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

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

<div class="swiper swiper1">

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

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"
  }
});

失敗例

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

  <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要らずで実装できる便利なツールなので、是非活用してみて下さい。

少しでも皆さんの参考になれば幸いです!

もくじ