フェードスライダーの実装（Swiper）

ロッチくん

最近メインビジュアルでよく見る画像が少しずつ拡大しながらフェードで切り替えるタイプのスライダーを実装してみたいニャン

近年のメインビジュアルの傾向として、まず画面いっぱい100vw、100vhで表示させながらフェードでビジュアルイメージを切り替えるタイプをよく目にします。今回は前回同様SwiperというJavaScriptライブラリを使って実装していきます。

最初に
コード解説
最後に

最初に

前回Swiperを使って実装したスライダーのページを応用していきますので、まだご覧になっていない方はまずこちらをお読みください。

今回実装するデモページはこちらになります。

コード解説

まず、HTMLとCSSはいじらずにJavaScriptのパラメーターを一行追加するだけで簡単にフェードを実現できます。

const mySwiper = new Swiper(".swiper", {
    effect: "fade",　// ←←←今回追加したもの
    loop: true,
    speed: 1500,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    },
    pagination: {
        el: ".swiper-pagination", 
    },
  });

これだけでも問題ありませんが、せっかくなのでビジュアルイメージが少しずつ拡大しつつフェードで切り替える仕様にしてみましょう。

こちらもCSSのanimationで簡単に実現できます。今回追加するのCSSは以下になります。

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img {
  /* 12秒かけて拡大させる */
  animation: zoomUp 12s linear 0s both;
}
@keyframes zoomUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}