Swiper sample 02

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-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slide-img"><img src="images/img_01.jpg" alt=""></div>
      <div class="slide-content">
        <h1>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/img_02.jpg" alt=""></div>
      <div class="slide-content">
        <h2>Slide Title 02</h2>
        <p>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/img_03.jpg" alt=""></div>
      <div class="slide-content">
        <h3>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
.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 fromBottom {
  0% {
  top: 80%;
    opacity: 0;
  }
  100% {
  top: 20%;
    opacity: 1;
  }
}
.swiper-slide-active h1, 
.swiper-slide-active h2, 
.swiper-slide-active h3 {
  animation: fromBottom .6s ease-in-out 0s 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>