Swiperでloopかつlazyの時に最後のスライドの画像を事前読み込みする方法 - Qiita

var mySwiper = new Swiper('.swiper-container', { preloadImages: false, lazy: { loadPrevNext: true, }, loop: true, slidesPerView: 3.33, centeredSlides: true, }); これを、最後のスライドは初期表示時に強制的に読み込まれるように設定した。 原因 色々試してみた結果、 loop: true かつ slidesPerView を整数以外で指定していると起こる現象のようだった。 加えて今回は centeredSlides: true を付けていたことで、未ロード状態のスライドがそのまま見えてしまっていた。 どの項目もデザイン上必要な設定だったため、最後のスライドだけJS側で最初に強制的に読み込むよう設定した。 やり方 以下のように設定すること