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

Swiperを使って、同一ページに複数のスライダーを設置する方法の備忘録です。

Swiperは、スライダーを簡単に作成することができるJavaScriptのプラグインです。

通常は、Swiperを読み込んだ状態で下記コードを記入すればスライダーを実装することができます。

HTML

<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 class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

JS

(function(){
  const mySwiper = new Swiper('.swiper', {
    autoplay: true,
    loop: true,
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  });
});

Swiperの詳しい使い方は、下記の記事で紹介しています。

上記の例では、「swiper」クラスで囲われた範囲に対して、Swiperでスライダーの実装するように設定しています。

しかし、そのまま同じクラスでスライダーを複製すると、スライダーが連動したり、ページネーションが正常に表示されない不具合が発生します。

スライダーを複数用意する

スライダーを複数設置するためには、スライダーごとに異なるIDかクラスを設定する必要があります。

<div class="slider01">
  <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 class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>
<div class="slider02">
  <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 class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>

一つ目のスライダーは「slider01」クラスで囲い、二つ目のスライダーは「slider02」クラスで囲っています。

スライダーごとにJSを設定する

続いて、作成したスライダーのクラスごとにJSを設定します。

(function() {
  const mySwiper = new Swiper('.slider01 .swiper', {
    autoplay: true,
    loop: true,
    pagination: {
      el: '.slider01 .swiper-pagination',
    },
    navigation: {
      nextEl: '.slider01 .swiper-button-next',
      prevEl: '.slider01 .swiper-button-prev',
    },
  });
});

(function() {
  const mySwiper = new Swiper('.slider02 .swiper', {
    slidesPerView: 1,
    pagination: {
      el: '.slider02 .swiper-pagination',
    },
    navigation: {
      nextEl: '.slider02 .swiper-button-next',
      prevEl: '.slider02 .swiper-button-prev',
    },
    breakpoints: {
      600: {
        slidesPerView: 3,
        spaceBetween: 20,
        centeredSlides: true,
      },
    },
  });

クラスごとに、function()を設定しています。この方法であれば、スライドごとに表示の設定を変えることも可能です。

例えば上記のコードでは、「slider02」を設定したスライドは、ブレイクポイントで画面サイズに合わせて表示する画像数を変更しています。