Swiper sample 06-2

Slide Title 01

Lorem ipsum dolor sit amet, consectetur

caption 01

Slide Title 02

Ipsa, quis ex repudiandae eum

caption 02

Slide Title 03

Ullam rerum quasi libero esse

caption 03
HTML (Swiper sample 06 と同じ)
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slide-img posChg1" style="background-image: url('images/swiper_img_01.jpg')"></div>
      <div class="slide-content">
        <h1 class="from_top">Slide Title 01</h1>
        <p>Lorem ipsum dolor sit amet, consectetur</p>
        <div class="caption">caption 01</div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="slide-img posChg2" style="background-image: url('images/swiper_img_02.jpg')"></div>
      <div class="slide-content">
        <h2 class="from_left">Slide Title 02</h2>
        <p class="from_right">Ipsa, quis ex repudiandae eum </p>
        <div class="caption">caption 02</div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="slide-img posChg3" style="background-image: url('images/swiper_img_03.jpg')"></div>
      <div class="slide-content">
        <h3 class="from_bottom">Slide Title 03</h3>
        <p>Ullam rerum quasi libero esse </p>
        <div class="caption">caption 03</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 sample 06との違いは高さの値とアニメーション部分のみ)
/* 変更部分 */
.swiper-container{
  max-width: 720px; 
}
.slide-img { 
  /* 表示される領域(スライダー)の高さが画像の高さより小さくなるように調整 */
  height: 360px;   
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow:visible;
}

/* 垂直方向のアニメーション background-position の2つ目のパラメータで指定 */
@keyframes posChg1 {
  0% {
    background-position: center top;
    /*background-position: center 0%; と同じ*/ 
  }
  100% {
    background-position: center center;
  }
}
.swiper-slide-active .posChg1 {
  animation: posChg1 4s linear 0s 1 normal both;
} 
@keyframes posChg2 {
  0% {
    background-position: center 70%;
  }
  100% {
    background-position: center 30%;
  }
}
.swiper-slide-active .posChg2 {
  animation: posChg2 6s linear 0s 1 normal both;
} 
@keyframes posChg3 {
  0% {
    background-position: center center;
  }
  100% {
    background-position: center 100%;
    /*background-position: center bottom; と同じ*/
  }
}
.swiper-slide-active .posChg3 {
  animation: posChg3 2s linear 0s 1 normal both;
} 

/* 変更部分 ここまで */


.swiper-slide .slide-content h1, .swiper-slide .slide-content h2, .swiper-slide .slide-content h3 {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFF;
  font-size: 30px;
  text-shadow: 2px 2px rgba(0,0,0,0.3);
}
.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: 0;
  font-size: 18px;
}
.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;
}

/* 文字のアニメーション */

@keyframes fromTop {
  0% {
    top: 0%;
    opacity: 0;
  }
  100% {
    top: 20%;
    opacity: 1;
  }
}  
  
@keyframes fromBottom {
  0% {
    top: 80%;
    opacity: 0;
  }
  100% {
    top: 20%;
    opacity: 1;
  }
}  

@keyframes fromleft {
  0% {
    left: 0%;
    opacity: 0;
  }
  100% {
    left: 50%;
    opacity: 1;
  }
}
  
@keyframes fromRight {
  0% {
    left: 100%;
    opacity: 0;
  }
  100% {
    left: 50%;
    opacity: 1;
  }
}
 
/* .from_top を指定した要素のアニメーション */
.swiper-slide-active .from_top {
  animation: fromTop .6s ease-in-out 0s 1 normal both;
} 
  
/* .from_bottom を指定した要素のアニメーション */
.swiper-slide-active .from_bottom {
  animation: fromBottom .6s ease-in-out 0s 1 normal both;
} 
  
/* .from_left を指定した要素のアニメーション */
.swiper-slide-active .from_left {
  animation: fromleft .6s ease-in-out 0s 1 normal both;
} 
  
/* .from_right を指定した要素のアニメーション */
.swiper-slide-active .from_right{
  animation: fromRight .6s ease-in-out .5s 1 normal both;
}
JavaScript
<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>