swiper.jsを使って複数のスライダーを作成したときに「.swiper-pagination」だけ表示されなかったときの備忘録

スライダーを複数用意する時はそれぞれに独自の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をそれぞれにつける必要がある

「swiper-pagination」が動かない理由

上に書いたようにそれぞれにclassを付与しても.swiper-paginationが動かないことがあった

厳密に言うなら、swiper.jsを使ったスライダーがページ内に複数ある時に動かなくなる

その原因は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-scrollbar"></div>
　<div class="swiper-button-prev"></div>
　<div class="swiper-button-next"></div>
</div>
<div class="swiper-pagination"></div>

上記はswiper-paginationをswiper-container外に出している

これはswiper-containerにoverflowがかかっており、ページネーションをスライダー外に配置したかったからこのようにしたのだが、どうにも複数swiper.jsを用意した場合上記の書き方だとswiper-paginationが上手く動作しなくなるらしい

なので、swiper-paginationをswiper-container内に収めたら正常に動作がするようになった

同様にswiper-button-prevまたswiper-button-nextをswiper-container外に出すのも注意である

通常どうりに動いているようで、swiper.jsを使った複数スライダーがあった場合連動をしてしまうためである

それはそれぞれのスライダーに独自classやidをおつけていた場合でも起こる

なので、swiper.jsを使うのであればswiper-container内にページネーション（swiper-pagination）や左右矢印ボタン（swiper-button-prev、swiper-button-next）を設置したほうが無難だろう