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>

補足情報（FW/ツールのバージョンなど）