【Splide】ズームインしながらフェードで切り替える

ヒーローイメージでよく利用するズームインしながらフェードで切り替えるスライダー。

検索してみると Swiper での実装方法は見つかりますが、Splide での実装方法が見つからなかったのでまとめてみました。

ちなみに Splide はアクセシビリティに配慮した軽量・高機能スライダーです。
Swiper は多機能すぎてカスタマイズが大変だ…
という方にオススメです！

バージョン

Splide のバージョンは 4.1.4 を利用しました。

HTML

<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

HTML

各スライドの要素を任意のタグで囲む必要があります。
以下サンプルコードだと、splide__slide の子要素に span を利用して要素を囲んでいます。

HTML

<div id="js-splide" class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide"><span>1</span></li>
      <li class="splide__slide"><span>2</span></li>
      <li class="splide__slide"><span>3</span></li>
      <li class="splide__slide"><span>4</span></li>
    </ul>
  </div>
</div>

CSS

Splide によって自動で追加される class にズームインアニメーションの設定をします。

• is-active （現在表示しているスライド）
• is-prev （1つ前のスライド）

ただし、このままだと最後から最初へ移動した時に、最後の要素（1つ前）に is-prev が追加されず表示がおかしくなります。

そのため、Splide のイベントハンドラを利用して splide__slide の子要素の span にアニメーション設定用の class を追加するようにします。

splide__slide に class を追加しても Splide によって削除されてしまうため、子要素への設定が必要となります。

CSS

.splide__slide.is-active span,
.splide__slide.is-prev span,
.splide__slide span.is-prev {
  animation: scale 7s linear 0s normal both;
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}

JavaScript

Splide#on() メソッドを利用して、 move イベント（スライダーが動く直前に発生）に class を追加する処理を記述します。

JS

const option = {
  type: 'fade',
  autoplay: true,
  rewind: true,
  interval: 6000, // 自動再生の間隔
  speed: 2000, // フェードする時間
}
const splide = new Splide('#js-splide', option)

// 最後から最初へ移動した時に、
// 最後の要素（1つ前）の子要素にclassを追加する
splide.on('move', function () {
  const lastElement = splide.root.querySelector('.splide__slide:last-child span')
  if (splide.index === 0) {
    lastElement.classList.add('is-prev')
    return
  }
  if (lastElement.classList.contains('is-prev')) {
    lastElement.classList.remove('is-prev')
  }
})
splide.mount()

DEMO

See the Pen Splide Zoom In Animation by Takuya Mori (@taqumo) on CodePen.