swiperのオプションが効かない

swiperを使ってズームアップした後にfadeで自動スライドするスライダーを作りたいのですが、上手くいきません。
問題点

・１枚目のみズームアップされる。
・ズームアップされる際、２枚目のスライドが１枚目のスライドの右側に被さってくる。
・スライドが切り替わる際のeffect: 'fade'が効いていない。

https://wemo.tech/2961
こちらのサイトを参考にして作りました。

画面いっぱいにヒーローイメージとして表示したかったので、backgroundで背景画像に変えています。
しかし色々考えたのですが、なぜこのように上手くいかないのかわかりません。
どなたかアドバイスお願いします。

html
1    <!--スライダー-->
2    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
3    <!--スタイルシート-->
4    <link rel="stylesheet" href="style.css">
5    <div class="mainvidual">
6        <div class="swiper-container">
7            <div class="swiper-wrapper">
8                <div class="swiper-slide"></div>
9                <div class="swiper-slide"></div>
10                <div class="swiper-slide"></div>
11            </div>
12        </div>
13    </div>
14    <!--jQuery -->
15    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
16    </script>
17    <!--スライダー-->
18    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
19
20    <script src="main.js"></script>

css
1.mainvidual{
2    grid-row: main;
3    height: 100vh;
4    width: 100vw;
5}
6.swiper-container{
7    height: 100%;
8    width: 100%
9}
10.swiper-wrapper{
11    height: 100%;
12    width: 100%
13}
14.swiper-slide:nth-child(1){
15    background: url("https://picsum.photos/id/1016/1200/640") center center / cover no-repeat;
16}
17.swiper-slide:nth-child(2){
18    background: url("https://picsum.photos/id/1016/1200/640") center center / cover no-repeat;
19}
20.swiper-slide:nth-child(3){
21    background: url("https://picsum.photos/id/1056/1200/640") center center / cover no-repeat;
22}
23
24
25
26@keyframes zoomUp {
27    0% {
28        transform: scale(1);
29    }
30    100% {
31        transform: scale(1.15);
32    }
33}
34.swiper-slide-active, .swiper-slide-duplicate-active, .swiper-slide-prev{
35    animation: zoomUp 10s linear 0s 1 normal both;
36}

javascript
1let swipeOption = {
2  loop: true,
3  effect: 'fade',
4  autoplay: {
5    delay: 4000,
6    disableOnInteraction: false,
7  },
8  speed: 2000,
9  pagination: {
10    el: '.swiper-pagination',
11    clickable: true,
12  }
13}
14new Swiper('.swiper-container', swipeOption);