Swiper Lazy Loading sample 1

<div class="swiper-container">
  <div class="swiper-wrapper"> 
    <div class="swiper-slide">
      <img data-src="images/swiper_img_01.jpg" class="swiper-lazy" alt="" />
      <div class="swiper-lazy-preloader"></div>
    </div>
    <div class="swiper-slide">
      <img data-src="/images/swiper_img_02.jpg" class="swiper-lazy" alt="" />
      <div class="swiper-lazy-preloader"></div>
    </div>
    
    ・・・中略・・・

    <div class="swiper-slide">
      <img data-src="images/swiper_img_08.jpg" class="swiper-lazy" alt="" />
      <div class="swiper-lazy-preloader"></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 -->

.container {
  max-width: 960px;
  margin: auto;
}
.swiper-slide img {
  max-width: 100%;
}
.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: true, // 遅延読み込みを有効に
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })
</script>