Swiper Rellax sample (Lazy Load) 3（修正版）

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

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

/* 各スライドと共に表示する文字 */
.swiper-slide .slide-content p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFF;
  text-shadow: .5px .5px rgba(0,0,0,0.6);
  margin: 0;
  padding: 3px 8px;
  font-size: 18px;
  background-color:rgba(0,0,0,.3);
}

/* 各スライドと共に表示するキャプション */
.swiper-slide .slide-content .caption {
  position: absolute;
  bottom: 30px;
  right: 30px;
  color: #FFF;
  font-size: 16px;
  background-color: rgba(0,127,127,0.5);
  padding: 3px 8px;
}

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

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
  let mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    //遅延読み込みするため、先読み込みを無効に
    preloadImages: false, 
    lazy: {
      //前後のスライドを先読み込みする
      loadPrevNext: true,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
  
  //.bg-slide-image を指定した（背景画像を設定した）要素の集まり
  const slide_img_elems = document.getElementsByClassName('bg-slide-image');
  //または const slide_img_elems = document.getElementsByClassName('swiper-lazy');
  //data-background 属性に指定した URL を格納する配列の初期化
  const slide_img_bg_src = [];
  //.bg-slide-image を指定した要素の集まりをループ
  for (let elem of slide_img_elems) {
    //data-background 属性に指定した URL を格納
    slide_img_bg_src.push(elem.getAttribute('data-background'));
  }
  
  //現在のスライドを表示している要素の背景画像を設定するかどうか
  let setupActiveSlide = true;
  //setTimeout() の戻り値（timeoutID）を入れる変数
  let timer = false; 
  
  //resize イベントにリスナーを登録
  window.addEventListener('resize', ()=> { 
    //変数 setupActiveSlide が true であれば（リサイズ時に一度だけ実行）
    if(setupActiveSlide) {
      //アクティブなスライドの要素を取得
      //.swiper-slide-active が追加付与された.swiper-slide の div 要素
      const activeSlide = document.querySelector('.swiper-slide-active');
      //背景画像（background-image、background-size、background-position）を設定
      activeSlide.style.setProperty('background-image', 'url("' + slide_img_bg_src[mySwiper.activeIndex] + '")');
      activeSlide.style.setProperty('background-size', 'cover');
      activeSlide.style.setProperty('background-position', 'center center');
      
      //★★★以下を追加★★★
      activeSlide.classList.add('swiper-lazy-loaded');
      
      //変数 setupActiveSlide を false に
      setupActiveSlide = false;
    }
    if (timer !== false) {
      clearTimeout(timer);
    }
    //リサイズ操作が終了した時点で以下の処理を実行
    timer = setTimeout( () => {
      //.swiper-lazy-loaded が付与された要素（遅延読み込みされた要素）を取得
      const img_loaded = document.getElementsByClassName('swiper-lazy-loaded');   
      for (let i=0; i < img_loaded.length; i++) { 
        if(mySwiper.params.loop) {
          //ループが有効な場合
          //親要素の data-swiper-slide-index 属性の値（スライドのインデックス）に1を加算
          let slide_index = parseInt(img_loaded[i].parentElement.getAttribute('data-swiper-slide-index')) + 1;
          // background-image を上記インデックスを使って設定
          img_loaded[i].style.setProperty('background-image', 'url("' + slide_img_bg_src[slide_index] + '")');
        }else{
          //ループが無効な場合
          img_loaded[i].style.setProperty('background-image', 'url("' + slide_img_bg_src[i] + '")');
        } 
        //変数 setupActiveSlide を true に
        setupActiveSlide= true;
      }
    }, 200);
  }); 
</script>
<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
<script>
  //パララックスプラグイン（Rellax.js）
  var rellax = new Rellax('.rellax', {
    speed: -6,
    center: false,
    wrapper: null,
    round: true,
    vertical: true,
    horizontal: false
  });
</script>