Swiper Lazy Loading sample 2（背景画像）

<div class="swiper-container">
  <div class="swiper-wrapper"> 
    <div class="swiper-slide">
      <div class="swiper-lazy bg-slide-image" data-background="images/swiper_img_01.jpg">
        <div class="swiper-lazy-preloader"></div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-lazy bg-slide-image" data-background="images/swiper_img_02.jpg">
        <div class="swiper-lazy-preloader"></div>
      </div>
    </div>
    
    ・・・中略・・・

    <div class="swiper-slide">
      <div class="swiper-lazy bg-slide-image" data-background="images/swiper_img_08.jpg">
        <div class="swiper-lazy-preloader"></div>
      </div>
    </div>
  </div>
  <!-- end of .swiper-wrapper -->
  <div class="swiper-pagination swiper-pagination-white"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
<!-- end of .swiper-container -->

.swiper-container {
  max-width: 960px;
}

/* 背景画像のスタイル */
.bg-slide-image {
  width: 100%;
  height: 60vh;
  background-size: cover;
  background-position:  center center;
  background-repeat: no-repeat;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #fff;
  opacity: 0.5;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: #fff;
}

<script>
  let mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    //画像の先読みを無効に
    preloadImages: false, 
    // 遅延読み込みを有効に
    lazy: {
      //1つ前と次のスライド画像をプリロード
      loadPrevNext: true,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })
</script>