Swiper Rellax sample 1

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

この例の場合、ブラウザのサイズを変更しても問題はありません。

HTML(パララックスを有効にするため rellax クラスや data-rellax-speed 属性を要素追加)
<div class="swiper-container">
  <div class="swiper-wrapper"> 
    <div class="swiper-slide">
      <div class="swiper-lazy bg-slide-image rellax" style="background-image: url(images/swiper_img_01.jpg)"> 
        <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" style="background-image: url(images/swiper_img_02.jpg)"> 
        <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" style="background-image: url(images/swiper_img_08.jpg)"> 
        <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>
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,
    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>