Swiper.jsでズームイン／アウトしながら画像が切り替わるスライダーを実装する

以前より少なくなった印象はありますが、ファーストビュー（FV）にスライダーを設置するのは、Webデザインの王道とも言える表現手法です。

とはいえ、シンプルに画像が切り替わるだけだと、昨今の目の肥えたユーザーには刺さりづらいかもしれません。

ということでこの記事では、「世界一簡単にスライダー実装ができる」と僕の中で評判のJSライブラリ『Swiper.js』を使って、画像がズームイン／アウトしながら切り替わるスライダーの実装方法についてまとめてみたいと思います。

Swiper.jsのインストール

まずはSwiper.jsをプロジェクトに導入します。

Swiper - The Most Modern Mobile Touch Slider

Swiper.jsのインストールには以下の3つの方法があります。

npm

コマンドライン（Win:コマンドプロンプト／Mac:ターミナル）で以下を実行してください。

$ npm install swiper

インストールできたら、プロジェクト内のJSファイルからSwiper.jsをインポートします。

import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';

インポートできたら、スライダーを実装するページのHTMLファイル、もしくはSwiper.jsをインポートしたJSファイルに以下を記述してSwiper.jsを初期化します。

const swiper = new Swiper("#swiper", {});

ダウンロード

以下のページから「swiper.min.css」と「swiper.min.js」の2ファイルをダウンロードします。

swiper CDN by jsDelivr - A CDN for npm and GitHub

ダウンロードできたら2ファイルをプロジェクト内フォルダに格納し、HTMLファイルから読み込みます。

<link rel="stylesheet" href="./css/swiper.min.css" />
<script src="./js/swiper.min.js" defer></script>

スライダーを実装するページのHTMLファイル、もしくはプロジェクト内のJSファイルに以下を記述してSwiper.jsを初期化します。

const swiper = new Swiper("#swiper", {});

CDN

スライダーを実装するページのHTMLファイルに、以下を記述します。

<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.min.js"></script>

スライダーを実装するページのHTMLファイル、もしくはプロジェクト内のJSファイルに以下を記述してSwiper.jsを初期化します。

const swiper = new Swiper("#swiper", {});

ズームイン／アウトするスライダーを実装する

HTML

スライダーを設置するページのHTMLに、以下を記述します。

この例では画像をスライドの背景としてインラインで読み込んでいます。
この辺りは状況や目的に合わせて、使いやすいように変更してください。

<div id="fv">
	<div id="fv__slider" class="swiper-container">
		<div class="fv__slides swiper-wrapper">
			<div class="swiper-slide fv__slide">
				<span class="fv__slide-img" style="background-image: url(./assets/images/img01.png);"></span>
			</div>
			<div class="swiper-slide fv__slide">
				<span class="fv__slide-img" style="background-image: url(./assets/images/img02.png);"></span>
			</div>
			<div class="swiper-slide fv__slide">
				<span class="fv__slide-img" style="background-image: url(./assets/images/img03.png);"></span>
			</div>
		</div>
	</div>
</div>

CSS

次にCSSを記述します。
スライダーを設置するページのHTMLファイルに直接書くか、読み込んでいるCSSに追記してください。

#fv {
	width: 100%;
	height: 100dvh;
	position: relative;
}

#fv__slider {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	overflow: clip;
}

#fv__slider .fv__slide {
	width: 100%;
	height: 100%;
	position: relative;
}

#fv__slider .swiper-slide-active .fv__slide-img,
#fv__slider .swiper-slide-duplicate-active .fv__slide-img,
#fv__slider .swiper-slide-prev .fv__slide-img {
	display: block;
	width: 100%;
	height: 100%;
	background: no-repeat center center / cover;
	/* 以下のどちらかを適用 */
	animation: fvZoomIn 10s linear 0s normal both; /* ズームイン */
	animation: fvZoomOut 10s linear 0s normal both; /*ズームアウト */
}

/* ズームイン */
@keyframes fvZoomIn {

	0% {
		transform: scale(1.25);
	}
	
	100% {
		transform: scale(1);
	}

}

/* ズームアウト */
@keyframes fvZoomOut {

	0% {
		transform: scale(1);
	}
	
	100% {
		transform: scale(1.25);
	}

}

上記CSS内にある以下の3つのクラスは、Swiper.jsの方でスライド要素に自動付与されるものです。

• .swiper-slide-active

• .swiper-slide-duplicate-active

• .swiper-slide-prev

これらすべてを指定して、ズームイン／アウトのアニメーションをつけるようにしてください。

そうしないとズームの動きが途中で止まってしまいます。

またズームイン／アウトは同時に適用できないので、一方はコメントアウトするか削除しておいてください。

animation: fvZoomIn 10s linear 0s normal both; /* ズームイン */
animation: fvZoomOut 10s linear 0s normal both; / ズームアウト */

最後に、Swiper.js初期化時に記述したソースコードにSwiper.jsのオプション設定を追加すれば完了です。

const swiper = new Swiper("#swiper", {
	loop: true,
	effect: 'fade',
	speed: 4000,
	autoplay: {
		delay: 4000,
		disableOnInteraction: false
	}
});

この例では、ズームイン／アウトのアニメーション時間を10秒に、スライダーの画像表示時間を8秒（speed:4000＋delay:4000）に設定してあります。

ズームのアニメーション時間をスライド切り替えより短くしてしまうと、画像が切り替わる前にズームが終わってしまうので、そこだけ注意してください。

まとめ

以上、Swiper.jsでズームイン／アウトしながら画像が切り替わるスライダーを実装する方法でした。

実際のところSwiper.jsによるスライド実装は通常と変わらず、CSSアニメーションでズームの動きを指定するだけです。

シンプルなフェード切り替えに変化をつけたいという場合は、試してみてもらえればと思います。

役に立ったと思ったらスキ・フォローお願いします！
ご質問がある場合やソースコードの記述ミスを見つけたときは、コメントで教えてください。