web関連

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

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-paginationswiper-container外に出している

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

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

スライダーが一枚の時はswiper-paginationswiper-container外にあっても動くため原因の解明に困難をきたした
注意である

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

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

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

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

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。