Swiperでフェードインするスライダーを作りたい

前提

Swiperでフェードインするスライダーの実装方法

実現したいこと

Swiperでフェードインするスライダーを実装したい。

発生している問題・エラーメッセージ

下記のサイトを参考に実装を試みたのですが、スライダーが動く際に他の画像が後ろにはみ出して表示される
https://wemo.tech/2961!

該当のソースコード

HTML

<div class="wrap">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="slide-img">
          <img src="https://picsum.photos/id/1041/1200/640" alt="img1">
        </div>
      </div>
      <div class="swiper-slide">
        <div class="slide-img">
          <img src="https://picsum.photos/id/1016/1200/640" alt="img2">
        </div>
      </div>
      <div class="swiper-slide">
        <div class="slide-img">
          <img src="https://picsum.photos/id/1056/1200/640" alt="img3">
        </div>
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
</div>

<style>

.wrap{
  padding: 16px;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

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

</style>

<script>
let swipeOption = {
  loop: true,
  effect: 'fade',
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
  speed: 2000,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  }
}
new Swiper('.swiper-container', swipeOption)
</script>