【Splide】ズーム(拡大)しながらフェードで切り替える方法

Splideでズームしながらフェードで切り替える方法ない？

Splideには様々なオプションがありますが、ズームさせるオプションはありません。

しかし、CSSアニメーションを使えば可能です。

今回はSplideを使ってズームしながらフェードで切り替わるスライダーをご紹介します。

Splideの基本的な使い方についてはこちらの記事を参照下さい。

Splideでズーム（拡大）しながらスライドする方法

まずは基本となるスライダーを見てみましょう。

See the Pen
Splide：基本形 by junpei (@junpei-sugiyama)
on CodePen.

前後の矢印、ページネーションが表示されているシンプルなスライダーです。

今回はHTML・CSSは基本形と同じで、JavaScriptでオプションを追加していきます。

コード解説

それではコードを解説していきます。

HTML

まずHTMLはこちらです。

<div class="splide" role="group" aria-label="ズームしながらフェード">
  <div class="splide__track">
    <div class="splide__list">
      <div class="splide__slide">
        <img src="画像パス1" alt="" />
      </div>
      <div class="splide__slide">
        <img src="画像パス2" alt="" />
      </div>
      <div class="splide__slide">
        <img src="画像パス3" alt="" />
      </div>
    </div>
  </div>
</div>

これは基本形と同じです。

CSS

CSSはこちらです。

/* ズーム */
.splide__slide img {
  transition: 8s ease-out;
}
.splide__slide.is-active img {
  transform: scale(1.15);
  transition-delay: 0s;
}
/* スライドのサイズ調整 */
.splide__slide img {
  height: auto;
  width: 100%;
}

今回はこのCSSがポイントですが、transform: scale(1.15);で表示されているスライドを15%拡大しています。

あとはtransition-delay: 0s;が無いとスライドの切り替わる時に変な挙動をします。

transition: 8s ease-out;では8秒にしていますが、これはJavaScriptのintervalとspeedを合わせた時間より1秒大きくしています。

ぴったりにしてしまうと一瞬停止してしまうからで、もっと遅くするとズームはゆっくりになります。

JavaScript

そしてJavaScriptはこちらです。

const splide = new Splide(".splide", {
  autoplay: true, // 自動再生
  type: "fade", // フェード
  rewind: true, // スライダーの終わりまで行ったら先頭に巻き戻す
  pauseOnHover: false, // カーソルが乗ってもスクロールを停止させない
  pauseOnFocus: false, // 矢印をクリックしてもスクロールを停止させない
  interval: 5000, // 自動再生の間隔
  speed: 2000, // スライダーの移動時間
}).mount();

ここではtypeをスライドではなくフェードにしています。

そしてtype: "fade"でループさせる場合にはrewind: trueにする必要があります。

あとはintervalとspeedで時間の調整をするだけです。