Swiper Rellax sample (Lazy Load)

Lorem ipsum dolor sit amet, consectetur

caption 01

Lorem ipsum dolor sit amet, consectetur

caption 02

Lorem ipsum dolor sit amet, consectetur

caption 03

Lorem ipsum dolor sit amet, consectetur

caption 04

Lorem ipsum dolor sit amet, consectetur

caption 05

Lorem ipsum dolor sit amet, consectetur

caption 06

Lorem ipsum dolor sit amet, consectetur

caption 07

Lorem ipsum dolor sit amet, consectetur

caption 08

この例の場合、遅延読み込み(Lazy Loading)を有効にしていますが、ブラウザのサイズを変更するとスライダーの画像が非表示になってしまいます。

HTML(遅延読み込みをするため swiper-lazy クラスを要素に追加してプリローダーを追加)
<div class="swiper-container">
  <div class="swiper-wrapper"> 
    <div class="swiper-slide">
      <div class="swiper-lazy bg-slide-image rellax" data-background="images/swiper_img_01.jpg">
        <div class="swiper-lazy-preloader"></div><!-- プリローダー -->
        <div class="slide-content">
          <p>Lorem ipsum dolor sit amet, consectetur</p>
          <div class="caption rellax" data-rellax-speed="7">caption 01</div>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-lazy bg-slide-image rellax" data-background="images/swiper_img_02.jpg">
        <div class="swiper-lazy-preloader"></div>
        <div class="slide-content">
          <p>Lorem ipsum dolor sit amet, consectetur</p>
          <div class="caption rellax" data-rellax-speed="7">caption 02</div>
        </div>
      </div>
    </div>
     
    ・・・中略・・・

    <div class="swiper-slide">
      <div class="swiper-lazy bg-slide-image rellax" data-background="images/swiper_img_08.jpg">
        <div class="swiper-lazy-preloader"></div>
        <div class="slide-content">
          <p>Lorem ipsum dolor sit amet, consectetur</p>
          <div class="caption rellax" data-rellax-speed="7">caption 08</div>
        </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 -->
CSS
.swiper-container {
  max-width: 960px;
}

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

/* 各スライドと共に表示する文字 */
.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;
}
JavaScript
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
  let mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    //プリロードをしない
    preloadImages: false, 
    //遅延読み込み(Lazy Loading)を有効に
    lazy: {
      //1つ前と次のスライド画像をプリロード
      loadPrevNext: true,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })
</script>
<!-- Rellax.js の読み込み -->
<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
<script>
  // Rellax の初期化
  var rellax = new Rellax('.rellax', {
    speed: -6,
    center: false,
    wrapper: null,
    round: true,
    vertical: true,
    horizontal: false
  });
</script>