Swiper.jsで背景をズームさせる

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

window.addEventListener('load', () => {
    const elem = document.querySelector('.swiper-container');
    if (elem === null) return;
    const swiperParams = {
      loop: true, // ループさせる
      effect: 'fade', // フェードのエフェクト
      autoplay: {
        delay: 4000, // ４秒後に次の画像へ
        disableOnInteraction: false, // ユーザー操作後に自動再生を再開する
      },
      speed: 2000, // ２秒かけながら次の画像へ移動
      allowTouchMove: false, // マウスでのスワイプを禁止
      // 左右のページ送りを有効にする
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      // 円形のページネーションを有効にする
      pagination: {
        el: '.swiper-pagination',
        clickable: true, // クリックを有効にする
      },
    };
    const swiper = new Swiper('.swiper-container', swiperParams);
  });

@-webkit-keyframes zoomUp {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
}

@keyframes zoomUp {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
}

.swiper-container{
  position: relative;
}
.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-active .swiper-img,
.swiper-slide-prev .swiper-img {
-webkit-animation: zoomUp 12s linear 0s;
animation: zoomUp 12s linear 0s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.swiper-slide {
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-img {
background-size: cover;
background-position: center center;
height: 600px;
}

.swiper-text {
position: absolute;
z-index: 10;
font-size: 40px;
color: #fff;
width: 100%;
top: 50%;
transform: translateY( -50% );
text-align: center;
font-weight: bold;
}

<div class="swiper-container" style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff">
<div class="swiper-wrapper">
<!-- 背景画像１ -->
<div class="swiper-slide">
    <div class="swiper-img" style="background-image: url('./images/swiper-img01.jpg');"></div>
    <!-- テキスト１-->
    <div class="swiper-text">
        <p>ゴリラがいる動物園は…</p>
    </div>
</div>
<!-- 背景画像２ -->
<div class="swiper-slide">
    <div class="swiper-img" style="background-image: url('./images/swiper-img02.jpg');"></div>
    <!-- テキスト２-->
    <div class="swiper-text">
        <p>全国で…</p>
    </div>
</div>
<!-- 背景画像３ -->
<div class="swiper-slide">
    <div class="swiper-img" style="background-image: url('./images/swiper-img03.jpg');"></div>
    <!-- テキスト３-->
    <div class="swiper-text">
        <p>６箇所</p>
        </div>
    </div>
</div>
<!-- 丸いページネーション -->
<div class="swiper-pagination"></div>

<!-- 左右のページ送り-->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>