【ver.11対応】サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（各種ナビゲーションカスタマイズ編）

1. 前・次ページボタンのカスタマイズ

<!-- Swiper START -->
<div class="swiper">
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
	</div>
	<!-- 前ページボタン -->
	<div class="swiper-button-prev"></div>
	<!-- 次ページボタン -->
	<div class="swiper-button-next"></div>
</div>
<!-- Swiper END -->

const mySwiper = new Swiper('.swiper', {
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	}
});

/* 全体のスタイル */
.swiper-wrapper {
	width: 100%;
	height: 250px;
}
/* 全スライド共通スタイル */
.swiper-slide {
	color: #ffffff;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 250px;
}
/* 4の倍数＋1枚目のスライドのスタイル（1枚目、5枚目…） */
.swiper-slide:nth-child(4n+1) {
	background-color: #EECB27;
}
/* 4の倍数＋2枚目のスライドのスタイル（2枚目、6枚目…） */
.swiper-slide:nth-child(4n+2) {
	background-color: #E13239;
}
/* 4の倍数＋3枚目のスライドのスタイル（3枚目、7枚目…） */
.swiper-slide:nth-child(4n+3) {
	background-color: #1F1762;
}
/* 4の倍数＋4枚目のスライドのスタイル（4枚目、8枚目…） */
.swiper-slide:nth-child(4n+4) {
	background-color: #BEDAE5;
}

【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...

https://garigaricode.com/swiper/#go-to-2-e4bdbfe38186e3819fe38281e381aee6ba96e58299

1. Swiperとは1. Swiperとはスライダー（カルーセル）が作れるJavaScriptライブラリです。しかもPCでもスマホでも使えて、レスポンシブ対応可能！jQueryにも依存せず、カスタマイズの自由度も高く、見た目も美しいスライダーがサクッとできちゃう。マクドナルド、ディズニー、トヨタ、BMW、Adobeなど様々な有名企業に導入されています。でも、公式ドキュメントは英語のみ…。今回は、そんなSwiperについて解説していきます。 2. 使うための準備2. 使うための準備CDNからライブラリを読み込む方法が楽でおすすめ。下記のライブラリとスタ...

ガリガリコード

 

1 Share

112 Pockets

.swiper {
	--swiper-theme-color: #ffffff;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

/* 前ページ、次ページボタン共通のスタイル */
/* 前ページボタンのスタイル */
.swiper-button-prev:after {
	font-family: "Material Icons"; /* 注：Material SymbolsではなくMaterial Icons */
	content: "\eac3"; /* keyboard_double_arrow_leftのUnicode */
}
/* 次ページボタンのスタイル */
.swiper-button-next:after {
	font-family: "Material Icons";
	content: "\eac9"; /* keyboard_double_arrow_rightのUnicode */
}

Material Symbols and Icons - Google Fonts

https://fonts.google.com/icons

Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

Google Fonts

（外部サイト）

 

1141 Users

52143 Pockets

/* ボタンのサイズ（高さ） */
.swiper {
	--swiper-navigation-size: 48px;
}
/* 次ページボタンのスタイル */
.swiper-button-next:after {
	content: url(画像アドレス);
}
/* 前ページボタンのスタイル */
.swiper-button-prev:after {
	content: url(画像アドレス);
	transform: scale(-1, 1); /* 左右反転 */
}

2. ページネーションのカスタマイズ

bulletsタイプ

<!-- Swiper START -->
<div class="swiper">
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
		<div class="swiper-slide">Slide 5</div>
		<div class="swiper-slide">Slide 6</div>
		<div class="swiper-slide">Slide 7</div>
		<div class="swiper-slide">Slide 8</div>
	</div>
	<!-- ページネーション -->
	<div class="swiper-pagination"></div>
</div>
<!-- Swiper END -->

const mySwiper = new Swiper('.swiper', {
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true,
	}
});

.swiper {
	--swiper-theme-color: #ffffff;
}

/* 全体のスタイル */
.swiper-pagination-bullet {
	width: 12px; /* 幅 */
	height: 12px; /* 高さ */
	background: #9acd32; /* 色：緑 */
	opacity: 0.5; /* 半透明（デフォルトでは0.2） */
}
/* 現在のスライドのスタイル */
.swiper-pagination-bullet-active {
	width: 20px; /* 幅 */
	height: 20px; /* 高さ */
	background: #ffd700; /* 色：黄色 */
	opacity: 1; /* 不透明 */
}

/* 全体のスタイル */
.swiper-pagination-bullet {
	width: 16px;
	height: 16px;
	border-radius: 0%;
	background: url(星の画像のURL);
	opacity: 0.5;
}
/* 現在のスライドのスタイル */
.swiper-pagination-bullet-active {
	width: 32px;
	height: 32px;
	background: url(ハートの画像のURL);
}

const mySwiper = new Swiper('.swiper', {
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true,
		dynamicBullets: true,
		dynamicMainBullets: 1,
	}
});

パラメータ解説

const mySwiper = new Swiper('.swiper', {
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true,
		dynamicBullets: true,
		dynamicMainBullets: 3
	}
});

/* ベースのスタイル */
.swiper-pagination-bullet {
	width: 20px; /* 最も大きい●の幅 */
	height: 20px; /* 最も大きい●の高さ */
	opacity: 0.5; /* 透明度 */
}
/* 最も大きい●のスタイル */
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
	background: #56aaff; /* 青 */
	opacity: 0.8;
}
/* 現在のスライドのスタイル */
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
	background: #56ffff; /* 水色 */
	opacity: 1; /* 不透明 */
}
/* 最も大きい●の一つ前のスライドのスタイル（二番目に大きい●） */
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
	background: #aa56ff; /* 紫 */
	opacity: 0.6;
}
/* 最も大きい●の二つ前のスライドのスタイル（一番小さい●） */
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
	background: #ff56aa; /* ピンク */
}
/* 最も大きい●の一つ次のスライドのスタイル（二番目に大きい●） */
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
	background: #56ff56; /* 緑 */
	opacity: 0.6;
}
/* 最も大きい●の二つ次のスライドのスタイル（一番小さい●） */
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
	background: #ffff56; /* 黄色 */
}

const mySwiper = new Swiper('.swiper', {
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true,
		renderBullet: function (index, className) {
			//中に数字を表示
			return '<span class="' + className + '">' + (index + 1) + '</span>';
		}
	}
});

パラメータ解説

/* 全体のスタイル */
.swiper-pagination-bullet {
	width: 16px;
	height: 16px;
	background: #ffffff;
	opacity: 0.5;
	color: #000000;
	font-size: 12px;
	line-height: 16px;
}
/* 現在のスライドのスタイル */
.swiper-pagination-bullet-active {
	background-color: #000000;
	color: #ffffff;
}

fractionタイプ

const mySwiper = new Swiper('.swiper', {
	pagination: {
		el: '.swiper-pagination',
		type: 'fraction',
	}
});

.swiper-pagination {
	font-size: 12px; /* サイズ */
	color: #ffffff; /* 文字色 */
}

const mySwiper = new Swiper('.swiper', {
	pagination: {
		el: '.swiper-pagination',
		type: 'fraction',
		renderFraction: function (currentClass, totalClass) {
			return '<span class="' + totalClass + '"></span>' + ' ページ中 ' + '<span class="' + currentClass + '"></span>' + ' ページ目';
		}
	}
});

パラメータ解説

/* 全体のスタイル */
.swiper-pagination-fraction {
	color: #ffffff;
	font-size: 14px;
}
/* 総スライド数のスタイル */
.swiper-pagination-total {
	color: #ff00ff;
}
/* 現在のスライド番号のスタイル */
.swiper-pagination-current {
	color: #00bfff;
	font-weight: bold;
}

progressbarタイプ

const mySwiper = new Swiper('.swiper', {
	pagination: {
		el: '.swiper-pagination',
		type: 'progressbar',
	}
});

.swiper-pagination-progressbar {
	height: 20px; /* プログレスバーの高さ */
	background: rgba(255, 255, 255, 0.5); /* 背景色：白・半透明 */
}
.swiper-pagination-progressbar-fill {
	background: #ffb6c1; /* 塗りつぶし：ピンク */
}

const mySwiper = new Swiper('.swiper', {
	pagination: {
		el: '.swiper-pagination',
		type: 'progressbar',
		progressbarOpposite: true,
	}
});

パラメータ解説

const mySwiper = new Swiper('.swiper', {
	pagination: {
		el: '.swiper-pagination',
		type: 'progressbar',
		renderProgressbar: function (progressbarFillClass) {
			return '<span class="' + progressbarFillClass + '"><div style="display:inline-block; position:absolute; left:0; bottom:0; width:100%; height:10px; background:#ffffff;"></div></span>';
		}
	}
});

パラメータ解説

customタイプ

const mySwiper = new Swiper('.swiper', {
	pagination: {
		el: '.swiper-pagination',
		type: 'custom',
		renderCustom: function (swiper, current, total) {
			if (swiper.isBeginning) {
				//1枚目
				return 'はじまりはじまり～';
			} else if (current == 2) {
				//2枚目
				return 'このスライドの幅は' + swiper.width + 'です';
			} else if (current == 3) {
				//3枚目
				return 'このスライドの高さは' + swiper.height + 'です';
			} else if (current == 4) {
				//4枚目
				return '<span style="color:#000000;">スライドの向きは' + swiper.params.direction + 'です</span>';
			} else if (current == 5) {
				//5枚目
				return 'たまには普通に表示。
' + current + ' / ' + total;
			} else if (current == 7) {
				//7枚目
				return 'ページネーションのtypeは' + swiper.params.pagination.type + 'ですね？';
			} else if (current == total) {
				//最後のスライド
				return 'めでたしめでたし';
			} else {
				//上記以外（6枚目）
				return '最初のスライドじゃないよ';
			}
		}
	}
});

パラメータ解説

.swiper-pagination-custom {
	color: #ffffff;
	font-size: 13px;
}

3. スクロールバーのカスタマイズ

<!-- Swiper START -->
<div class="swiper">
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
	</div>
	<!-- スクロールバー -->
	<div class="swiper-scrollbar"></div>
</div>
<!-- Swiper END -->

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

.swiper-scrollbar {
	height: 25px; /* 高さ */
	background: rgba(230, 255, 85, 0.3); /* 背景色（現在のスライド以外） */
	border-radius: 50px; /* 丸み */
}
.swiper-scrollbar-drag {
	background: rgba(230, 255, 85, 0.7); /* 背景色（現在のスライド） */
	border-radius: 50px; /* 丸み */
}

4. 全部付けてみる

<!-- Swiper START -->
<div class="swiper">
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
	</div>
	<!-- 前ページボタン -->
	<div class="swiper-button-prev"></div>
	<!-- 次ページボタン -->
	<div class="swiper-button-next"></div>
	<!-- ページネーション -->
	<div class="swiper-pagination"></div>
	<!-- スクロールバー -->
	<div class="swiper-scrollbar"></div>
</div>
<!-- Swiper END -->

const mySwiper = new Swiper('.swiper', {
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	},
	scrollbar: {
		el: '.swiper-scrollbar',
		draggable: true,
	}
});

.swiper {
	--swiper-theme-color: #ffffff;
}

5. 各ナビゲーションをスライドの外側に配置する

<div class="swiper-parent">
	<!-- Swiper START -->
	<div class="swiper">
		<!-- メイン表示部分 -->
		<div class="swiper-wrapper">
			<!-- 各スライド -->
			<div class="swiper-slide">Slide 1</div>
			<div class="swiper-slide">Slide 2</div>
			<div class="swiper-slide">Slide 3</div>
			<div class="swiper-slide">Slide 4</div>
		</div>
		<!-- ページネーション -->
		<div class="swiper-pagination"></div>
		<!-- スクロールバー -->
		<div class="swiper-scrollbar"></div>
	</div>
	<!-- Swiper END -->
	<!-- 前ページボタン -->
	<div class="swiper-button-prev"></div>
	<!-- 次ページボタン -->
	<div class="swiper-button-next"></div>
</div>

/* Swiperの親要素 */
.swiper-parent {
	position: relative;
}
/* Swiper本体 */
.swiper {
	width: calc(100% - 100px);	/* ☆前・次ページボタンの幅をそれぞれ50pxとして、その分を引く */
	padding-bottom: 50px;		/* ★ページネーション＋スクロールバー分の余白50pxを下に取る */
	box-sizing: content-box;
}
/* 前・次ボタンの縦位置調整（スライドの高さの中央に合わせる） */
.swiper-button-prev, .swiper-button-next {
	top: calc((100% - 50px) * 0.5);	/* ☆★ページネーション＋スクロールバー（50px）を除く縦位置の中央（＝スライドの高さの中央）に一旦配置 */
	margin-top: -22px;			/* ★ボタンの高さ（44px）の半分のネガティブマージンで上に少しずらす */
}

6. 縦方向のスライドにするとどうなるか

const mySwiper = new Swiper('.swiper', {
	direction: 'vertical',
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	},
	scrollbar: {
		el: '.swiper-scrollbar',
		draggable: true,
	}
});

/* 前・次スライドボタン共通スタイル */
.swiper-button-prev, .swiper-button-next {
	transform: rotate(90deg);	/* 元のボタンを90度回転 */
	margin: 0 auto;	/* 以下、横方向の中央配置用 */
	left: 50%;
	margin-left: -22px;
}
/* 前ページボタン */
.swiper-button-prev {
	top: 5px;		/* 上端からの距離 */
	bottom: auto;
}
/* 次ページボタン */
.swiper-button-next {
	bottom: 5px;	/* 下端からの距離 */
	top: auto;
}

/* Swiperの親要素 */
.swiper-parent {
	position: relative;
	height: 350px;	/* 全体の高さ：スライドの高さ（250px）＋前・次ページボタンの高さ（50px×2） */
}
/* Swiper本体 */
.swiper {
	top: 50px;				/* スライドの上端を前ページボタンの高さの分だけ下げる */
	padding-right: 50px;	/* ページネーション・スクロールバー分の余白を右に取る */
	box-sizing: content-box;
}
/* 前・次スライドボタン共通スタイル */
.swiper-button-prev, .swiper-button-next {
	transform: rotate(90deg);	/* 元のボタンを90度回転 */
	margin: 0 auto;		/* 以下、スライド幅の中央配置用 */
	left: calc((100% - 50px) * 0.5);	/* 全ページネーション・スクロールバー（50px）を除く左右中央（＝スライド幅の中央）に一旦配置 */
	margin-left: -22px;			/* ボタン幅の半分のネガティブマージンで左に少しずらす */
}
/* 前ページボタン */
.swiper-button-prev {
	top: 5px;		/* 上端からの距離 */
	bottom: auto;
}
/* 次ページボタン */
.swiper-button-next {
	bottom: 5px;	/* 下端からの距離 */
	top: auto;
}