Swiper.jsのバージョン9と10でオプションのloopとslidesPerViewを併用すると、loopが効かない（止まる）という現象が発生します。この現象の原因と解決策について記します。
推定原因と発生条件
わたしが調べた限りこの現象はバージョン8までは起きておらず、バージョン11で発生しなくなりました。
そのため、おそらくライブラリ自体のバグかと思われます。
この現象はスライドの枚数がslidesPerView値の2倍より少ない場合にのみ発生します。
解決策1: バージョンを変更する
先ほども述べました通り、この現象はバージョン9と10でのみ発生します。
そのため、バージョン9または10を使う必要がなければ、変更するのが1番シンプルな解決策かと思われます。
<!-- <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script> --> <!-- 削除 -->
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <!-- 追加 -->解決策2: スライドを増やす
先ほども述べました通り、この現象はスライドの枚数がslidesPerView値の2倍より少ない場合にのみ発生します。
なので下記のような時に発生します。
※スライドの枚数(=4) < slidesPerView値の2倍(=6)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<div class="swiper sample-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
<div class="swiper-slide"><img src="./img/sample4.png"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
const swiper = new Swiper('.sample-slider', {
loop: true,
slidesPerView: 3,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>
なので同じスライドのセットを追加すれば解決します。
ただし、ページネーションも重複してしまうという難点があります。
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
<div class="swiper-slide"><img src="./img/sample4.png"></div>
<div class="swiper-slide"><img src="./img/sample1.png"></div> <!-- 追加 -->
<div class="swiper-slide"><img src="./img/sample2.png"></div> <!-- 追加 -->
<div class="swiper-slide"><img src="./img/sample3.png"></div> <!-- 追加 -->
<div class="swiper-slide"><img src="./img/sample4.png"></div> <!-- 追加 -->
</div>解決策3: Javascriptで対応する
ページネーションの重複も考慮して解決するには、Javascriptで対応しましょう。
1. Swiperのイベントオプションで、初期化時にスライドをコピーして追加してあげます。
2. ページネーションの重複を削除すれば完了です。
const swiper = new Swiper('.sample-slider', {
loop: true,
slidesPerView: 3,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
/*******↓ 追加 ↓*******/
on: {
init: function loopBagFix(swiper){
/* 1.スライドのコピーを追加 */
const slides = swiper.slides
const wrapper = swiper.wrapperEl
slides.forEach( (slide) => {wrapper.append(slide.cloneNode(true))} )
/* 2.余計なページネーションを削除 */
setTimeout(() => {
const paginations = swiper.pagination.bullets
paginations.forEach((pagination, index) => {
if(index > (paginations.length / 2) - 1){
pagination.remove()
}
})
},100)
},
}
/*******↑ 追加 ↑*******/
})まとめ
解決方法を三つ記しましたが、簡単さは、解決策1 > 解決策2 > 解決策3となっています。
なので、下記のように状況によって柔軟に対応されてみてはいかがでしょうか！
Swiper9や10を使う必要はない→解決策1: バージョンを変更する
ページーネーションを表示しない→解決策2: スライドを手動で追加する
ページネーションを絶対表示したい→解決策3: Javascriptで対応する
以上、Swiper9と10でloop×slidesPerViewが動かない件の原因と対応策についてでした！
