Swiperで背景を
ズームさせるデモページ

ゴリラがいる動物園は…

全国で…

6箇所

head

                               
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
                               
                           

js

                               

let mySwiper = new Swiper(".swiper-container", {
// Optional parameters
loop: true, // ループの指定
effect: "fade", //フェードの指定
autoplay: {
delay: 4000, //4秒後に次のスライドへ
disableOnInteraction: false //ユーザー側で操作してもスライドを止めない
},
speed: 2000, //2秒かけてフェードで切り替わる
pagination: { // 丸のページネーションを使うなら書く
el: ".swiper-pagination"
},
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 { //1.15倍させる指定
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 { //12秒かけて拡大させる
-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; //600pxの高さで表示させる
}

//テキストを追加したい場合は以下を追加
.slide-text {
position: absolute;
z-index: 10;
font-size: 4rem;
color: #fff;
width: 100%;
top: 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('./images/swiper-img01.jpg');"></div>
    <!-- テキスト1-->
    <div class="slide-text">
        <p>ゴリラがいる動物園は…</p>
    </div>
</div>
<!-- 背景画像2 -->
<div class="swiper-slide">
    <div class="slide-img" style="background-image: url('./images/swiper-img01.jpg');"></div>
    <!-- テキスト2-->
    <div class="slide-text">
        <p>全国で…</p>
    </div>
</div>
<!-- 背景画像3 -->
<div class="swiper-slide">
    <div class="slide-img" style="background-image: url('./images/swiper-img01.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>