BLOG【Swiper.js】画像が拡大しながらフェードで切り替わるスライダー【テキストも変えられるよ】

<div class="main-visual">
    <div class="swiper-container-mv">
        <ul class="swiper-wrapper">
            <li class="swiper-slide main-visual__item main-visual__item--1">
                <img src="/img/swiper/swiper01.jpg" class="slide-img" alt="">
                <p class="main-visual__copy main-visual__copy--1">ほげほげテキスト</p>
            </li>
            <li class="swiper-slide main-visual__item main-visual__item--2">
                <img src="/img/swiper/swiper02.jpg" class="slide-img" alt="">
                <p class="main-visual__copy main-visual__copy--2">ふがふがテキスト</p>
            </li>
            <li class="swiper-slide main-visual__item main-visual__item--3">
                <img src="/img/swiper/swiper03.jpg" class="slide-img" alt="">
                <p class="main-visual__copy main-visual__copy--3">ぴよぴよテキスト</p>
            </li>
            <li class="swiper-slide main-visual__item main-visual__item--4">
                <img src="/img/swiper/swiper04.jpg" class="slide-img" alt="">
                <p class="main-visual__copy main-visual__copy--4">hoge fuga piyoテキスト</p>
            </li>
        </ul>
    </div>
    <!-- [/swiper-container] -->
</div>

.main-visual {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
    z-index: 9;

    // 各スライド
    &__item {
        position: relative;
        overflow: hidden; // 拡大した画像がはみ出ないようにする

        img {
            width: 100%;
        }
    }

    // キャッチコピー
    &__copy {
        width: 100%;
        font-size: 36px;
        font-weight: bold;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        text-align: center;

        // 2枚ずつ違う色のテキストシャドウ入れてみる
        &--1,
        &--3 {
            color: #fff;
            text-shadow: 6px 6px 12px #795427, -6px -6px 12px #795427, 6px -6px 12px #795427, -6px 6px 12px #795427;
        }

        &--2,
        &--4 {
            color: #000;
            text-shadow: 6px 6px 12px #fff, -6px -6px 12px #fff, 6px -6px 12px #fff, -6px 6px 12px #fff;
        }
    }
}

// ここからはswiper付属のcssをアレンジ
.swiper-container-mv .slide-img img{
    display: block;
}

.swiper-container-mv .swiper-slide-active .slide-img,
.swiper-container-mv .swiper-slide-duplicate-active .slide-img,
.swiper-container-mv .swiper-slide-prev .slide-img{
    animation: fadezoom 10s 0s forwards;
}
@keyframes fadezoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);  // 拡大率はお好きなように
    }
}

$(function() {
    let swipeOption = {
        loop: true, // エンドレスリピートさせる
        effect: 'fade', // これがフェードのオプション
        autoplay: {
            delay: 4000,  // 自動再生スピード
            disableOnInteraction: false // ユーザが指やスマホでスライダーに触った時、スライドを止めないように設定するオプション
        },
        speed: 2000
    };
    new Swiper('.swiper-container-mv', swipeOption);
});