「Swiper」は簡単にスライドショーを実装することが出来る人気プラグインです。
このプラグインを使用して無限スライダーを実装した際、スライダーが止まってしまうことがあります。
実際に僕がそんな場面に遭遇しました。
この記事ではどんな時に留まってしまうのか、そしてその解決方法をご紹介したいと思います。

なお、「Swiper」を使った無限ループスライダーの詳しい実装方法はこちらの記事でご紹介しています。

【Swiper】横に一定速度で流れ続ける無限ループスライダーの作り方

Swiperで無限ループが止まってしまう原因

Swiperで無限ループが止まってしまう原因は読み込んでいるSwiperのバージョンとオプション設定の可能性があります。

Swiperのバージョンが9で以下の設定の時、無限ループが一周すると止まってしまいます。

• loopedSlidesを設定している
• slidesPerViewの値がclass=”swiper-slide”の2倍を超えている

loopedSlidesを設定している場合のサンプルがこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ただし、loopedSlidesを設定していても絶対に止まるというわけではないようです。

次にslidesPerViewの値がclass="swiper-slide"の2倍を超える場合のサンプルがこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

slidesPerViewの値がclass="swiper-slide"の2倍を超える場合は確実の止まるようです。

解決方法

解決方法はloopedSlidesを設定せず、slidesPerViewの値がclass="swiper-slide"の2倍を超えないようにします。

実はloopedSlidesの設定は無くても無限ループは実装出来るみたいです。

もしくは「Swiper」のバージョン9からバージョン10やバージョン11に切り替えます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

なお、バージョン11ではloopedSlidesの設定は削除されているようです。

そして、実際に僕の環境で無限ループが止まった時の「Swiper」の設定は以下のようになっていました。

let mySwiper = new Swiper('.sec01-gallery', {
    loop: true,
    speed: 6000,
    slidesPerView: 4.11,
    loopedSlides: 2,
    autoplay: {
        delay: 0,
    }
});

これを以下のように書き換えるだけで正常に動作するようになりました。

let mySwiper = new Swiper('.sec01-gallery', {
    loop: true,
    speed: 6000,
    slidesPerView: 4.11,
    // loopedSlides: 2,
    autoplay: {
        delay: 0,
    }
});

loopedSlidesの設定をコメントアウトしただ正常に動作するようになりました。

まとめ

いかがでしたか？
「Swiper」を使っていると何気ない設定でバグを発生させてしまうことがあります。
「Swiper」で無限ループを実装する場合は今回ご紹介した内容に注意するようにしましょう。