Swiper の背景画像を時間経過と共にズームダウンさせつつ、
フェード効果を用いてスライドを切替させてみます。

動作デモ

今回も CodeSandBox を使って実装を行いました。
この記事では全体のソースコードは紹介せず、補足だけを行います。

解説

はじめに

ズームアウト（イン）+ フェード効果 は紹介されているブログをよく見かけますが、
いずれも 拡大された画像が一気に縮小されてから次のスライドが表示される問題 が特定の条件下で発生していました。
このような動きは美しくないため、独自に調整を加えた上でご紹介致します。

追加されるクラスの役割

アニメーションはCSSで実装するため、追加されるクラスについて把握しておく必要があります。

<!--  スライドの基本クラスです。 -->
<div class="swiper-slide"></div>

<!-- 前のスライドに追加されるクラスです。前のスライドが無い場合は追加されません。 -->
<div class="swiper-slide swiper-slide-prev"></div>

<!-- 次のスライドに追加されるクラスです。次のスライドが無い場合は追加されません。 -->
<div class="swiper-slide swiper-slide-next"></div>

<!-- 表示中のスライドに追加されるクラスです。 -->
<div class="swiper-slide swiper-slide-active"></div>

調整を加えた箇所

細かな解説は他の方が既に行われているため、ここでは行いません。
以下のブログを参考にさせていただきました。
背景画像をズームアップしながらフェードで切り替えるスライダー - Swiperで実装する方法

前のスライドに独自のクラスを追加

表示中のスライドに追加されるクラス .swiper-slide-active に加えて、
前回表示したスライドに .swiper-slide-active-prev というクラスを追加し、
ズームアウトのスタイルを定義しています。

.swiper-slide-active-prev .swiper-bg img,
.swiper-slide-active .swiper-bg img {
    animation: zoomDown 10s linear 0s 1 normal both;
}

スライドを連続で切替できないように

一度切り替えた場合は、swiper.speed の値分の時間が経過しないと
次の切り替えができないよう、独自のCSSを追加しています。

連続で切り替えた場合だと、拡大された画像が一気に縮小されてから次のスライドが表示される問題 が発生します。

.swiper-button-prev.swiper-button-disabled-user,
.swiper-button-next.swiper-button-disabled-user {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}
.swiper-pagination-not-clickable {
    opacity: 0.5;
    pointer-events: none;
}

slideChangeイベント実行時に以下のような処理が働くよう設定しています。

on: {
  slideChange: () => {
    // 変数
    const self = swiper;
    const speed = self.params.speed;
    const navPrevButton = self.el.querySelector(".swiper-button-prev");
    const navNextButton = self.el.querySelector(".swiper-button-next");
    const navButtonDisabledUser = "swiper-button-disabled-user";

    // 処理
    _slidesChangeFirst();
    setTimeout(() => {
      for (let index = 0; index < self.slides.length; index++) {
        self.slides[index].classList.remove("swiper-slide-active-prev");
      }
      _slidesChangeLast();
    }, speed);
    self.slides[self.previousIndex].classList.add("swiper-slide-active-prev");


    // スライド変更後に最初に行う処理
    function _slidesChangeFirst() {
      navPrevButton.classList.add(navButtonDisabledUser);
      navNextButton.classList.add(navButtonDisabledUser);
      self.pagination.el.classList.add("swiper-pagination-not-clickable");
    }
    // スライド変更後に最後に行う処理
    function _slidesChangeLast() {
      navPrevButton.classList.remove(navButtonDisabledUser);
      navNextButton.classList.remove(navButtonDisabledUser);
      self.pagination.el.classList.remove("swiper-pagination-not-clickable");
    }
  }
}

解説は以上となります。