[swiper.js]表示中のスライド（画像）をズームさせる効果を導入する例

賑やかしのひとつとして。

ズーム効果の狙いというか
HTML
JS
css(scss)

ズーム効果の狙いというか

静止画をそのまま貼り付けるよりも、ちょっと動いている方がなんかリッチな感じに見えたりする。移動させたり拡大させたり、snsの動画とかでもよく使われているので珍しくないかと思う。

HTML

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><picture><img src="https://placehold.jp/2000x1600.png" alt=""></picture></div>
        <div class="swiper-slide"><picture><img src="https://placehold.jp/2000x1600.png" alt=""></picture></div>
        <div class="swiper-slide"><picture><img src="https://placehold.jp/2000x1600.png" alt=""></picture></div>
        <div class="swiper-slide"><picture><img src="https://placehold.jp/2000x1600.png" alt=""></picture></div>
        <div class="swiper-slide"><picture><img src="https://placehold.jp/2000x1600.png" alt=""></picture></div>
    </div>
</div>

領域いっぱいに画像を配置するにはobject-fitとかを使いたい。
.swiper-slideの中に直入れでもいいんだけど、ラッピングしておくと安心。
<picture>を使えば<source>でレスポンシブにも対応できるし良いですよね。

JS

const swiper = new Swiper('.swiper',{
    lazy: true,
    loop: true,
    speed: 2000,
    effect: 'fade',
    allowTouchMove: false,
    autoplay:{
        delay: 6000,
    }
});

ズーム効果とフェードは相性がいい。

speedとdelayの時間はcssにも関係するのでメモっておく。

css(scss)

.swiper{
    .swiper-wrapper{
        width: 100vw;
        height: 100vh;
        .swiper-slide{
            picture{
                width: 100%;
                height: 100%;
                display: block;
                img{
                    width: 100%;
                    height: 100%;
                    display: block;
                    object-fit: cover;
                    object-position: center;
                    transform: scale(1);
                    transition: transform 8s;
                }
            }
            &.swiper-slide-active,&.swiper-slide-prev{
                picture{
                    img{
                        transform: scale(1.1);
                    }
                }
            }
        }
    }
}

transitionの時間はjsで設定したspeedとdelayの和以上にする。
そうしないと、切り替わりギリギリでtransitionが終わってズームが止まってなんか気持ち悪いことになる。

表示時に付与される.swiper-slide-activeにscale()を指定することで、ズーム効果を得られる。
それは当然のことで、表示後に付与される.swiper-slide-prevにも同様にscale()を指定するのがポイント。切り替わりの最中に.swiper-slide-activeの付与先が切り替わるので、.swiper-slide-activeだけにscale()を指定したら切り替わってる最中に元のサイズに戻るのが見えてしまう。
だから、視認できるうちはズームし続ける（＝縮小させない）をしたいならこういう設定になる。