【JavaScript】swiperのautoplayで表示する画像が途中で切れる現象を解決

swiperでautoplayを指定して、画像を自動再生しているとき画像が一周したタイミングでうまく表示されない現象が起きました。(下記動画参照)

この現象の解決方法について解説します！

画像が切れる原因
修正内容の説明
まとめ

画像が切れる原因

原因はページに表示させる画像の枚数に対して、htmlで用意している画像の数が少なかったことが原因でした。

現状swiperに対するJavaScriptの指定で1ページに表示する画像の枚数を4とし、画像をループさせています。

loop: true, //表示をループ
slidesPerView: 4, //ページに4枚表示させる

れに対し、htmlでは画像を5枚用意しています。

<!-- Additional required wrapper -->
<div class="swiper-wrapper p-scroll-swiper__wrapper">
    <!-- Slides -->
    <div class="swiper-slide p-scroll-swiper__slide">
        <div class="p-scroll-swiper__img">
            <img src="./assets/img/swiper-img-sp1.png" alt=""> //1枚目
        </div>
    </div>
    <div class="swiper-slide p-scroll-swiper__slide">
        <div class="p-scroll-swiper__img">
            <img src="./assets/img/swiper-img-sp2.png" alt=""> //2枚目
        </div>
    </div>
    <div class="swiper-slide p-scroll-swiper__slide">
        <div class="p-scroll-swiper__img">
            <img src="./assets/img/swiper-img-sp3.png" alt=""> //3枚目
        </div>
    </div>
    <div class="swiper-slide p-scroll-swiper__slide">
        <div class="p-scroll-swiper__img">
            <img src="./assets/img/swiper-img-sp4.png" alt=""> //4枚目
        </div>
    </div>
    <div class="swiper-slide p-scroll-swiper__slide">
        <div class="p-scroll-swiper__img">
            <img src="./assets/img/swiper-img-sp5.png" alt=""> //5枚目
        </div>
    </div>
</div>

パラメーターloop: trueを使用する場合、要素数 >= 表示する画像 × 2の条件でないと表示に不具合がでるというルールがあるようです。

現状では要素数(5) >= 表示する画像(4) × 2 が成り立っていないということです。

修正内容の説明

今回の修正として、htmlの画像枚数を増やすため既存の5枚の画像指定をまるまるコピペして画像が10枚あるように修正しました。

<!-- Additional required wrapper -->
<div class="swiper-wrapper p-scroll-swiper__wrapper">
    <!-- Slides -->
    <div class="swiper-slide p-scroll-swiper__slide">
        <div class="p-scroll-swiper__img">
            <img src="./assets/img/swiper-img-sp1.png" alt=""> //1枚目
        </div>
    </div>
    <div class="swiper-slide p-scroll-swiper__slide">
        <div class="p-scroll-swiper__img">
            <img src="./assets/img/swiper-img-sp2.png" alt=""> //2枚目
        </div>
    </div>
    <div class="swiper-slide p-scroll-swiper__slide">
        <div class="p-scroll-swiper__img">
            <img src="./assets/img/swiper-img-sp3.png" alt=""> //3枚目
        </div>
    </div>
    <div class="swiper-slide p-scroll-swiper__slide">
        <div class="p-scroll-swiper__img">
            <img src="./assets/img/swiper-img-sp4.png" alt=""> //4枚目
        </div>
    </div>
    <div class="swiper-slide p-scroll-swiper__slide">
        <div class="p-scroll-swiper__img">
            <img src="./assets/img/swiper-img-sp5.png" alt=""> //5枚目
        </div>
    </div>
// 上の画像の指定をコピペし画像が10枚になるようにする
    <div class="swiper-slide p-scroll-swiper__slide">
        <div class="p-scroll-swiper__img">
            <img src="./assets/img/swiper-img-sp1.png" alt="">
        </div>
    </div>
    <div class="swiper-slide p-scroll-swiper__slide">
        <div class="p-scroll-swiper__img">
            <img src="./assets/img/swiper-img-sp2.png" alt="">
        </div>
    </div>
    <div class="swiper-slide p-scroll-swiper__slide">
        <div class="p-scroll-swiper__img">
            <img src="./assets/img/swiper-img-sp3.png" alt="">
        </div>
    </div>
    <div class="swiper-slide p-scroll-swiper__slide">
        <div class="p-scroll-swiper__img">
            <img src="./assets/img/swiper-img-sp4.png" alt="">
        </div>
    </div>
    <div class="swiper-slide p-scroll-swiper__slide">
        <div class="p-scroll-swiper__img">
            <img src="./assets/img/swiper-img-sp5.png" alt="">
        </div>
    </div>
</div>

この修正で要素数(10) >= 表示する画像(4) × 2 が成り立ちうまく表示されました！

念のため、JavaScriptの指定も記載しておきます。

document.addEventListener('DOMContentLoaded', function() {
  const mySwiper = new Swiper('.scroll-swiper', {
    //表示をループ
    loop: true,
    //ページに映る画像の数
    slidesPerView: 1.8,
    //画像が動くスピード
    speed: 10000,
    //画像間の距離
    spaceBetween: 10,
    //対象の画像を中央に表示
    centeredSlides: true,
    //
    preventInteractionOnTransition: true,
    autoplay: {
      delay: 0,
    },
    watchSlidesProgress: true, // スライドの進行状態を監視
    breakpoints: {
      768: {
        slidesPerView: 4,
        spaceBetween: 20,
      },
    },
  });
});