Swiper sample 03

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
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slide-img"><img src="images/swiper_img_01.jpg" alt=""></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"><img src="images/swiper_img_02.jpg" alt=""></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"><img src="images/swiper_img_03.jpg" alt=""></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>
  <div class="swiper-pagination swiper-pagination-white"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
CSS
.slide-img img {
  width: 100%;
}
.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', {
    loop: true,
    
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },

    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

  })
</script>