swiperでズームアップしながらフェードインするスライダーを実装したが、1枚目の右端が2枚目のスライドの上に残ってしまう。

こちらのサイトを参考にして、swiperを用いて2枚の画像がズームアップされながらフェードイン表示されるスライダーを作ってみたのですが、ページをリロードした瞬間に表示された1枚目の画像が、2枚目の右端に残ってしまいます。作ったもの

html
1    <div class="swiper-container">
2        <div class="swiper-wrapper">
3            <div class="swiper-slide">
4                <div class="slide-img">
5                    <img src="img/hana2.jpg" alt="スライダー画像1">
6                </div>
7            </div>
8            <div class="swiper-slide">
9                <div class="slide-img">
10                    <img src="img/hana.jpg" alt="スライダー画像2">
11                </div>
12        </div>
13    </div>

css
1  @keyframes zoomUp {
2    0% {
3      transform: scale(1);
4    }
5    100% {
6      transform: scale(1.15);
7    }
8  }
9  
10  .swiper-slide-active .slide-img,
11  .swiper-slide-duplicate-active .slide-img,
12  .swiper-slide-prev .slide-img{
13    animation: zoomUp 15s linear 0s 1 normal both;  
14  }
15
16 .swiper-wrapper {
17     width: 100%; 
18    height: 600px;
19    overflow: hidden;
20    position: relative;
21  }
22
23  .slide-img img{
24    width: 100%;
25  }

JavaScript
1<script>
2    let swipeOption = {
3        loop: true,
4        effect: 'fade',
5        autoplay: {
6          delay: 2000,
7          disableOnInteraction: false,
8        },
9        speed: 5000,
10      }
11      new Swiper('.swiper-container', swipeOption);
12</script>
13