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)を設置したほうが無難だろう
swiper-pagination
がswiper-container
外にあっても動くため原因の解明に困難をきたした注意である