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

ゴリラがいる動物園は…

全国で…

6箇所

headに書くこと

<link rel="//cdn.jsdelivr.net/npm/swiper@4.5.1/dist/css/swiper.min.css">
<script src="//cdn.jsdelivr.net/npm/swiper@4.5.1/dist/js/swiper.min.js"></script>

JavaScriptで書くこと

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

CSSで書くこと

@-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-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-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;
}
.slide-img {
background-size: cover;
background-position: center center;
height: 600px;
}

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

HTMLで書くこと

<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 背景画像1 -->
<div class="swiper-slide">
    <div class="slide-img" style="background-image: url('https://yumegori.com/wp-content/uploads/2021/05/img-demo-swiper01.jpg');"></div>
    <!-- テキスト1-->
    <div class="slide-text">
        <p>ゴリラがいる動物園は…</p>
    </div>
</div>
<!-- 背景画像2 -->
<div class="swiper-slide">
    <div class="slide-img" style="background-image: url('https://yumegori.com/wp-content/uploads/2021/05/img-demo-swiper02.jpg');"></div>
    <!-- テキスト2-->
    <div class="slide-text">
        <p>全国で…</p>
    </div>
</div>
<!-- 背景画像3 -->
<div class="swiper-slide">
    <div class="slide-img" style="background-image: url('https://yumegori.com/wp-content/uploads/2021/05/img-demo-swiper03.jpg');"></div>
    <!-- テキスト3-->
    <div class="slide-text">
        <p>6箇所</p>
        </div>
    </div>
</div>
<!-- 丸いページネーション -->
<div class="swiper-pagination swiper-pagination-white"></div>

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