Swiperでレスポンシブ対応のスライダーを作成

この記事の目次

Swiperとは
Swiperの特徴
Swiperの基本的な使い方
- デモ
- HTML
- CSS
- JavaScript
オプション設定
おすすめデモ
- Scrollbar
- Grid
- Effect cards
- Thumbs gallery loop
まとめ

1. Swiperとは

Swiper（Swiper.js）とは、Webサイトで画像やコンテンツをスライドさせて表示する「スライダー（カルーセル）」を簡単に作れる、人気の高いJavaScriptライブラリです。

出典 : Swiper

jQueryが不要で単体で動き、スマホの指でのスワイプ操作やレスポンシブ表示にも強く、多くのWeb制作で使われています。

今回は、Swiperでレスポンシブ対応のスライダーを作成する方法を紹介します。

2. Swiperの特徴

jQueryに依存しない

SwiperはjQuery非依存なので、脱jQueryを求める方や、要件としてjQueryが使えないプロジェクトの場合はまず候補に挙がると思います。

オプション・コールバック関数が豊富でカスタマイズ性が高い

オプション・コールバック関数が非常に多く用意されているのが特徴で、柔軟なカスタマイズが可能となっています。

レスポンシブ対応

画面の大きさに合わせて、表示する数をすぐ変えられます。また、指でのスワイプやタッチの動きがとても滑らかです。

3. Swiperの基本的な使い方

Swiper Demosページで紹介されている、デモからスライダーを制作する方法を紹介します。

出典 : Swiper Demos

3-1. デモ

まず、Swiper Demosページにアクセスします。Defaultを実装してみます。DefaultのPreviewをクリックして、全画面でデモを確認します。Previewを閉じます。コードを表示するため、JS Coreボタンをクリックします。左にコード、右にデモが表示されます。HTML、CSS、JavaScriptそれぞれのファイルに、必要なコードをコピペします。

DefaultのPreviewをクリック

全画面でデモを確認

JS Coreボタンをクリックしてコードを表示

HTML、CSS、JavaScriptそれぞれのファイルに、必要なコードをコピペ

3-2. HTML

headに共通のswiper-bundle.min.cssとswiper-bundle.min.jsを読み込みます。CSS、JavaScriptは、その後に読み込みます。

スライダーを表示したい場所にswiperのHTMLを挿入します。親要素(今回はsection)にスライダー全体のサイズを指定します。実際には、swiper-slide内に画像を挿入します。

<!-- Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@14.0.1/swiper-bundle.min.css"/>	
<!-- CSS --> 
<link href="css/style.css" rel="stylesheet">
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@14.0.1/swiper-bundle.min.js"></script>
<!-- JS -->
<script src="js/script.js" defer></script>

<section class="swiper-container">
	<!-- Swiper -->
	<div class="swiper mySwiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide">Slide1</div>
			<div class="swiper-slide">Slide2</div>
			<div class="swiper-slide">Slide3</div>
			<div class="swiper-slide">Slide4</div>
			<div class="swiper-slide">Slide5</div>
		</div>
	</div>
</section>

3-3. CSS

コードのswiper以降のCSSを書き込みます。

/* 親要素 */
.swiper-container{
	width: 100vw;
	height: 100vh;
}

/* swiper */
.swiper {
	width: 100%;
	height: 100%;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #444;
	display: flex;
	justify-content: center;
	align-items: center;
}
.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

3-4. JavaScript

Swiper JSをJavaScriptファイルに書き込みます。Defaultは中身が空欄ですが、オプション設定を書き込むことができます。

var swiper = new Swiper('.mySwiper', {
  // オプション
});

4. オプション設定

JavaScriptで、ループ、エフェクトなどの設定を行います。よく使うオプションの一部を紹介します。

var swiper = new Swiper('.mySwiper', {
  // オプション
  loop: true, // ループ有効化
  lazy: true, // 遅延読み込み有効化
  effect: 'fade', // フェードエフェクト
  autoplay: {
    delay: 3000, // 自動再生の間隔
  },
});

オプション	説明	値
loop	スライダーをループさせるか	true , false
lazy	遅延読み込みをするか	true , false
effect	エフェクトの種類	fade , cube , cards 他
autoplay	自動再生
delay	自動再生の間隔	数字（ミリ秒）

5. おすすめデモ

デモの中からおすすめのスライダーを紹介します。前項で紹介した、共通のswiper-bundle.min.css、swiper-bundle.min.jsを読み込み、HTML、CSS、JavaScriptをそれぞれのファイルに入力します。

5-1. Scrollbar

出典 : Scrollbar

インジケーターがスライドバーになっています。シンプルで使いやすいスライダーです。

<!-- Swiper -->
<div class="swiper mySwiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide">Slide1</div>
		<div class="swiper-slide">Slide2</div>
		<div class="swiper-slide">Slide3</div>
		<div class="swiper-slide">Slide4</div>
		<div class="swiper-slide">Slide5</div>
		<div class="swiper-slide">Slide6</div>
		<div class="swiper-slide">Slide7</div>
		<div class="swiper-slide">Slide8</div>
		<div class="swiper-slide">Slide9</div>
	</div>
	<div class="swiper-scrollbar"></div>
</div>

/* swiper */
.swiper {
	width: 100%;
	height: 100%;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #444;
	display: flex;
	justify-content: center;
	align-items: center;
}
.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

var swiper = new Swiper('.mySwiper', {
	scrollbar: {
    	el: '.swiper-scrollbar',
    	hide: true,
	},
});

5-2. Grid

出典 : Grid

スライドが２段になっているギャラリー風のスライダーです。

<!-- Swiper -->
<div class="swiper mySwiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide">Slide1</div>
		<div class="swiper-slide">Slide2</div>
		<div class="swiper-slide">Slide3</div>
		<div class="swiper-slide">Slide4</div>
		<div class="swiper-slide">Slide5</div>
		<div class="swiper-slide">Slide6</div>
		<div class="swiper-slide">Slide7</div>
		<div class="swiper-slide">Slide8</div>
		<div class="swiper-slide">Slide9</div>
	</div>
	<div class="swiper-pagination"></div>
</div>

/* swiper */
.swiper {
	width: 100%;
	height: 100%;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #333;
	height: calc((100% - 30px) / 2) !important;

	/* Center slide text vertically */
	display: flex;
	justify-content: center;
	align-items: center;
}

var swiper = new Swiper('.mySwiper', {
	slidesPerView: 3,
	grid: {
		rows: 2,
	},
	spaceBetween: 30,
	pagination: {
		el: '.swiper-pagination',
		clickable: true,
	},
});

5-3. Effect cards

出典 : Effect cards

カードのようなスライダーです。UIがとてもユニークでかわいいスライダーです。

<!-- Swiper -->
<div class="swiper mySwiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide">Slide1</div>
		<div class="swiper-slide">Slide2</div>
		<div class="swiper-slide">Slide3</div>
		<div class="swiper-slide">Slide4</div>
		<div class="swiper-slide">Slide5</div>
		<div class="swiper-slide">Slide6</div>
		<div class="swiper-slide">Slide7</div>
		<div class="swiper-slide">Slide8</div>
		<div class="swiper-slide">Slide9</div>
	</div>
</div>

/* swiper */
.swiper {
	width: 240px;
    height: 320px;
}
.swiper-slide {
	display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
}
.swiper-slide:nth-child(1n) {
    background-color: rgb(206, 17, 17);
}
.swiper-slide:nth-child(2n) {
    background-color: rgb(0, 140, 255);
}
.swiper-slide:nth-child(3n) {
    background-color: rgb(10, 184, 111);
}
.swiper-slide:nth-child(4n) {
    background-color: rgb(211, 122, 7);
}
.swiper-slide:nth-child(5n) {
    background-color: rgb(118, 163, 12);
}
.swiper-slide:nth-child(6n) {
    background-color: rgb(180, 10, 47);
}
.swiper-slide:nth-child(7n) {
    background-color: rgb(35, 99, 19);
}
.swiper-slide:nth-child(8n) {
    background-color: rgb(0, 68, 255);
}
.swiper-slide:nth-child(9n) {
    background-color: rgb(218, 12, 218);
}
.swiper-slide:nth-child(10n) {
    background-color: rgb(54, 94, 77);
}

var swiper = new Swiper('.mySwiper', {
	effect: 'cards',
	grabCursor: true,
});

5-4. Thumbs gallery loop

出典 : Thumbs gallery loop

サムネイル付きのループスライダーです。トップページのメインでよく使用されるようなスライダーです。

<!-- Swiper -->
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-1.jpg" />
		</div>
        <div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-2.jpg" />
        </div>
        <div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-3.jpg" />
        </div>
        <div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-4.jpg" />
        </div>
        <div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-5.jpg" />
        </div>
        <div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-6.jpg" />
        </div>
        <div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-7.jpg" />
        </div>
        <div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-8.jpg" />
        </div>
        <div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-9.jpg" />
        </div>
        <div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-10.jpg" />
        </div>
	</div>
	<div class="swiper-button-next"></div>
	<div class="swiper-button-prev"></div>
</div>
<div thumbsSlider="" class="swiper mySwiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-1.jpg" />
        </div>
        <div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-2.jpg" />
        </div>
        <div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-3.jpg" />
        </div>
        <div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-4.jpg" />
        </div>
        <div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-5.jpg" />
        </div>
        <div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-6.jpg" />
        </div>
        <div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-7.jpg" />
        </div>
        <div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-8.jpg" />
        </div>
        <div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-9.jpg" />
        </div>
        <div class="swiper-slide">
			<img src="https://swiperjs.com/demos/images/abstract-10.jpg" />
		</div>
	</div>
</div>

/* swiper */
.swiper {
	width: 100%;
	height: 100%;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #444;
	display: flex;
	justify-content: center;
	align-items: center;
}
.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.swiper {
	width: 100%;
	height: 300px;
	margin-left: auto;
	margin-right: auto;
}
.swiper-slide {
	background-size: cover;
	background-position: center;
}
.mySwiper2 {
	height: 80%;
	width: 100%;
}
.mySwiper {
	height: 20%;
	box-sizing: border-box;
	padding: 10px 0;
}
.mySwiper .swiper-slide {
	width: 25%;
	height: 100%;
	opacity: 0.4;
}
.mySwiper .swiper-slide-thumb-active {
	opacity: 1;
}
.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

var swiper = new Swiper('.mySwiper', {
	loop: true,
	spaceBetween: 10,
	slidesPerView: 4,
	freeMode: true,
	watchSlidesProgress: true,
});
var swiper2 = new Swiper('.mySwiper2', {
	loop: true,
	spaceBetween: 10,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	thumbs: {
		swiper: swiper,
	},
});

6. まとめ

以上で今回のBLOGは終了です。実装も簡単で、コードもシンプルなので、使いやすいJavaScriptライブラリだと思います。オプションも豊富なので、ループに変更したり、自動再生速度を変更したりするのが簡単にできます。今回紹介したスライダーの他にも多くのスライダーがあるので、デザインに合わせて選ぶことができます。