<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="slide-img">
            <img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg">
           </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-img">
            <img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img04.jpg">
           </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-img">
            <img src="https://www.nan-demo.work/wp-content/uploads/2022/07/image03.jpg">
           </div>
        </div>
      </div>
    </div>
.swiper-container{
  width:960px;
  height:600px;
  overflow:hidden;
  margin:0 auto;  
}

.swiper-container img {
  width:100%;
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoomUp 12s linear 0s 1 normal both; 
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
let swipeOption = {
  loop: true,
  effect: 'fade',
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
  speed: 2000,
}
new Swiper('.swiper-container', swipeOption);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.