【swiper.js】スライダーを複数用意したときにページネーションが上手く動作しなかった

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

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

「.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-paginationをswiper-container内に収めれば複数スライダーがあろうと正常に動作する。

注意：「.swiper-button-prev」や「.swiper-button-next」が上手く動作しない場合

swiper-button-prevまたswiper-button-nextをswiper-container外に出すと同様の現象が起きるため注意。