Swiper Rellax sample 1

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>