お問合せ
MENU

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

コードのこと

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

ファーストビューでよくあるズームしながらフェードで切り替わるスライダーをSwiperで作ります！

ズームしながらフェードで切り替わるスライダー（Swiper使用）

こんなやつ！

デモサイトはこちら

この動きを実装できると素敵な雰囲気のサイトを作ることができます。
実装も難しくないのでぜひ記事を読んでマスターしてくださいね。

【Swiperの実装準備】SwiperのCSSとJavaScriptを読み込もう

Swiperを実装するにはまずSwiperのCSSとJavaScriptを読み込む必要があります。

CDNで読み込む場合

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

ダウンロードして使用、もしくはnpmで読み込む場合

https://swiperjs.com/get-started#download-assets

上記のリンクから詳細を確認してください。
Swiperのダウンロード方法が分からない場合は以下の記事を参考にしてください。

【Swiper】ダウンロードして使用する方法【ダウンロード場所が分からない方必見！】

ズームしながら切り替わるフェードスライダーのSwiper実装コード

HTML

<div class="swiper">
      <div class="swiper-wrapper">
          <div class="swiper-slide">
              <div class="swiper-img">
                  <img src="./img/zoom-fade-swiper/1.webp">
              </div>
          </div>
          <div class="swiper-slide">
              <div class="swiper-img">
                  <img src="./img/zoom-fade-swiper/2.webp">
              </div>
          </div>
          <div class="swiper-slide">
              <div class="swiper-img">
                  <img src="./img/zoom-fade-swiper/3.webp">
              </div>
          </div>
          <div class="swiper-slide">
              <div class="swiper-img">
                  <img src="./img/zoom-fade-swiper/4.webp">
              </div>
          </div>
      </div>
  </div>

CSS

/* ズームアニメーション */
@keyframes zoomUpAnimation {
0% {
    transform: scale(1);
}
100% {
    transform: scale(1.15);
}
}
.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-active .swiper-img,
.swiper-slide-prev .swiper-img {
animation: zoomUpAnimation 12s linear infinite;
}
.swiper-slide img {
height: auto;
width: 100%;
}

JavaScript

new Swiper('.swiper', {
    loop: true,//繰り返し
    effect: 'fade',//フェードで切り替え
    speed: 2000,//切り替えのスピード
    autoplay: {
        delay: 4000,//切り替えまでの待機時間
        disableOnInteraction: false, // 操作しても自動再生を継続させる
    },
});

コードの解説

HTML解説

<div class="swiper">
      <div class="swiper-wrapper">
          <div class="swiper-slide">
              <div class="swiper-img">
                  <img src="./img/zoom-fade-swiper/1.webp">
              </div>
          </div>
          <div class="swiper-slide">
              <div class="swiper-img">
                  <img src="./img/zoom-fade-swiper/2.webp">
              </div>
          </div>
          <div class="swiper-slide">
              <div class="swiper-img">
                  <img src="./img/zoom-fade-swiper/3.webp">
              </div>
          </div>
          <div class="swiper-slide">
              <div class="swiper-img">
                  <img src="./img/zoom-fade-swiper/4.webp">
              </div>
          </div>
      </div>
  </div>

通常はswiper-slideの直下に画像を設置しますが、今回画像をゆっくりズームさせたいので<div class=”swiper-img”></div>で画像を囲って、そのdiv要素にアニメーションの指定をします。

CSS解説

/* ズームアニメーション */
@keyframes zoomUpAnimation {
0% {
    transform: scale(1);
}
100% {
    transform: scale(1.15);
}
}

アニメーションが始まった0%の時に1倍の大きさ、アニメーションが終わる100%の時に1.15倍の大きさになるようにkeyframesを設定しています。

.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-active .swiper-img,
.swiper-slide-prev .swiper-img {
animation: zoomUpAnimation 12s linear infinite;
}

.swiper-imgにアニメーションの設定をしています。

zoomUpAnimation→アニメーションの名前
12s→アニメーションの時間（12秒）
linear→一定の速度で
infinite→繰り返し

JavaScriptの解説

new Swiper('.swiper', {
    loop: true,//繰り返し
    effect: 'fade',//フェードで切り替え
    speed: 2000,//切り替えのスピード
    autoplay: {//自動再生
        delay: 4000,//切り替えまでの待機時間
        disableOnInteraction: false, // 操作しても自動再生を継続させる
    },
});

Swiperの指定内容はコメントの通りです。
ポイントはloop、effect:’fade’、autoplayですね。

ズームしながらフェードで切り替わるスライダーを実装する方法まとめ

簡単なコードを書くだけで実装ができるSwiperは有難いですね✨

Swiperの切り替えスピードを変えるだけでも一気に雰囲気が変わりますので、ぜひ試してみてくださいね！

ブログ一覧へ