Swiper sample 05

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">
      <!-- img 要素から背景画像(background-image)に変更-->
      <div class="slide-img zoom" 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">
      <!-- img 要素から背景画像(background-image)に変更-->
      <div class="slide-img translate1" 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">
      <!-- img 要素から背景画像(background-image)に変更-->
      <div class="slide-img translate2" 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
/* .slide-img の背景画像の設定を追加 */
.slide-img {  /* 小画面 */
  height: 300px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow:visible;
}
 
@media only screen and (min-width:651px) {  /* 中画面 */
  .slide-img {
    height: 450px;
  }
}
 
@media only screen and (min-width:961px) {  /* 大画面 */
  .slide-img  {
    height: 593px;
  }
}
/* .slide-img の背景画像の設定の追加 ここまで */


.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;
}

/* 画像のアニメーション (一部変更)*/

@keyframes zoom {
  0% {
  transform: scale(1);
  }
  100% {
  transform: scale(1.1);
  }
}
.swiper-slide-active .zoom { /* img を削除 */
  animation: zoom 6s linear 0s 1 normal both;
} 
 
@keyframes translate1 {
  0% {
  transform: scale(1.07) translate(0,0);
  }
  100% {
  transform: scale(1.07) translate(3%, 2%);
  }
}
  
.swiper-slide-active .translate1 { /* img を削除 */
  animation: translate1 6s linear 0s 1 normal both;
} 
  
@keyframes translate2 {
  0% {
  transform: scale(1.05) translate(1%,2%);
  }
  100% {
  transform: scale(1.1) translate(-2%, -3%);
  }
}
 
.swiper-slide-active .translate2 { /* img を削除 */
  animation: translate2 6s linear 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>