【Swiper】ズームしながらフェードで切り替わるスライダーを実装する

JavaScriptライブラリ「Swiper」を使って、ズームしながらフェードで切り替わるスライダーを実装します。

Swiperの読み込み

通常通りSwiperのCSSとJavaScriptを読み込みます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

HTML

通常であれば.swiper-slide直下にimgタグですが、ズームのエフェクトを実装するため、imgタグを更にdivで囲っています。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide swiper-slide01">
      <div class="swiper-slide__item">
        <img src="画像のパス" alt="">
      </div>
    </div>
    <div class="swiper-slide swiper-slide01">
      <div class="swiper-slide__item">
        <img src="画像のパス" alt="">
      </div>
    </div>
    <div class="swiper-slide swiper-slide01">
      <div class="swiper-slide__item">
        <img src="画像のパス" alt="">
      </div>
    </div>
  </div>
</div>

CSS

アニメーションを設定します。5秒かけてscaleが1→1.3になるように設定しました。

.swiper-slide-active .swiper-slide__item,
.swiper-slide-duplicate-active .swiper-slide__item,
.swiper-slide-prev .swiper-slide__item {
  animation: zoomanime 5s linear 0s normal both;
}

@keyframes zoomanime {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

JavaScript

5秒かけてズームしているので、切り替えの設定は5秒以下にしました。

window.onload = function() {
  const swiper = new Swiper(".swiper", {
    loop: true,
    speed: 2000,
    autoplay: {
      delay: 2000,
    },
    effect: 'fade',
    fadeEffect: {           
      crossFade: true
    },
  });
}

Swiperの読み込み

HTML

CSS

JavaScript

DEMO