【swiper.js】スライダーが連動して動いてしまう場合の対処方法

複数のswiper.jsのスライダーをページ内に用意し、全てのスライダーが連動してしまった時の備忘録

解決方法：スライダーそれぞれに独自のclassやidをつける

swiper.jsを使って複数のスライダーを用意する時は、それぞれに独自のclassやidを指定しないとすべてのスライダーが連動してしまう。

まずは、HTMLの書き方は以下のように書く。

<div class="swiper-container slider1">
  <div class="swiper-wrapper">
      <div class="swiper-slide"><h1>Slide 1</h1></div>
      <div class="swiper-slide"><h1>Slide 2</h1></div>
      <div class="swiper-slide"><h1>Slide 3</h1></div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-scrollbar"></div>
</div>

<div class="swiper-container slider2">
…（省略）
</div>

<div class="swiper-container slider3">
…（省略）
</div>

次にjavascriptの書き方は以下のように書く。

var slider1 = new Swiper ('.slider1', {
    effect: 'slide',
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
    },
});

var slider2 = new Swiper ('.slider2', {
…（省略）
});
var slider3 = new Swiper ('.slider3', {
…（省略）
});

このように複数のスライダーを用意するなら独自のclassやidをそれぞれにつける必要がある。