Java Script / JQuery

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

ぱんこ 2018年8月1日
9 2,632 読み終わるまで約 47 分

目次

このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。
Swiperとはなんぞやという方はこちらをご参照ください。
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超...
https://garigaricode.com/swiper
1. Swiperとは1. Swiperとはスライダー（カルーセル）が作れるJavaScriptライブラリです。しかもPCでもスマホでも使えて、レスポンシブ対応可能！jQueryにも依存せず、カスタマイズの自由度も高く、見た目も美しいスライダーがサクッとできちゃう。でも、公式ドキュメントは英語のみ…。今回は、そんなSwiperについて解説していきます。 2. 使うための準備2. 使うための準備CDNからライブラリを読み込む方法が楽でおすすめ。下記のライブラリとスタイルシートを、Swiperを設置したいHTMLに追加します。HTML<link rel="styleshee...
ガリガリコード
 

というわけで、早速カスタマイズしていきましょう。





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


基本レイアウトはこう。

Sample.1-1
Slide 1
Slide 2
Slide 3
Slide 4

HTML
<!-- Swiper START -->
<div class="swiper-container">
	<!-- メイン表示部分 -->
	<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 -->
JavaScript
var mySwiper = new Swiper('.swiper-container', {
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	}
});

CSS（サンプル用なので初期状態は非表示にしておきます）

CSS
/* 全体のスタイル */
.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;
}
※別途ライブラリの読み込みが必要です。
わからない方は基礎編参照
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超...
https://garigaricode.com/swiper/#go-to-2-e4bdbfe38186e3819fe38281e381aee6ba96e58299
1. Swiperとは1. Swiperとはスライダー（カルーセル）が作れるJavaScriptライブラリです。しかもPCでもスマホでも使えて、レスポンシブ対応可能！jQueryにも依存せず、カスタマイズの自由度も高く、見た目も美しいスライダーがサクッとできちゃう。でも、公式ドキュメントは英語のみ…。今回は、そんなSwiperについて解説していきます。 2. 使うための準備2. 使うための準備CDNからライブラリを読み込む方法が楽でおすすめ。下記のライブラリとスタイルシートを、Swiperを設置したいHTMLに追加します。HTML<link rel="styleshee...
ガリガリコード
 

この前次ページへのボタンですが、デフォルトだと上記のような青い＜ ＞です。
これを白または黒に変更するのは簡単です。

ではまず白バージョン。

Sample.1-2
Slide 1
Slide 2
Slide 3
Slide 4

HTML
<!-- Swiper START -->
<div class="swiper-container">
	<!-- メイン表示部分 -->
	<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 swiper-button-white"></div>
	<!-- 次ページボタン -->
	<div class="swiper-button-next swiper-button-white"></div>
</div>
<!-- Swiper END -->
※JavaScript、CSSはSample.1-1と同じ

あらかじめ用意されてあるクラス名を追加するだけ。
黒バージョンはこう。

Sample.1-3
Slide 1
Slide 2
Slide 3
Slide 4

HTML
<!-- Swiper START -->
<div class="swiper-container">
	<!-- メイン表示部分 -->
	<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 swiper-button-black"></div>
	<!-- 次ページボタン -->
	<div class="swiper-button-next swiper-button-black"></div>
</div>
<!-- Swiper END -->
※JavaScript、CSSはSample.1-1と同じ

さらに違う色にしたい時は、スタイルシートで変更します。

Sample.1-4
Slide 1
Slide 2
Slide 3
Slide 4

CSS
.swiper-button-prev {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ff7f50'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ff7f50'%2F%3E%3C%2Fsvg%3E");
}
※HTML・JavaScriptはSample.1-1と同じ、CSSはSample.1-1に上記を追加

＜ ＞の色を #ff7f50 にしてみました。

background-image: url("data:image/svg+xml;charset=utf-8, … '%20fill%3D'%23ff7f50'%2F%3E%3C%2Fsvg%3E");

赤字部分がカラーコードに該当するので、ここを変更すると他の色にもできます。
でも…見づらいですよね、これ。
白・黒以外はデフォルトのボタンにこだわらず、まったく別のものにしてしまった方がむしろすっきりします。

ではそのやり方です。
例えば、Font Awesomeを使って、
前ボタンに、
次ボタンにを使うとします。

Font Awesomeを使う場合はあらかじめHTMLのHEAD部分に下記を追加。
HTML
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
Sample. 1-5
Slide 1
Slide 2
Slide 3
Slide 4

CSS
/* 前ページ、次ページボタン共通のスタイル */
.swiper-button-prev,
.swiper-button-next {
	background-image: none; /* デフォルトのボタン画像を消す */
	width: 28px; /* ボタンの幅 */
	height: 86px; /* ボタンの高さ */
	margin-top: -43px; /* 縦中央配置用：ボタンの高さの半分のネガティブマージン（top:50%がすでに設定されている） */
}
/* 前ページボタンのスタイル */
.swiper-button-prev:before {
	font-family: "Font Awesome 5 Free";
	content: "\f100"; /* angle-double-leftのUnicode */
	font-size: 48px;
	color: #ffefd5;
}
/* 次ページボタンのスタイル */
.swiper-button-next:before {
	font-family: "Font Awesome 5 Free";
	content: "\f101"; /* angle-double-rightのUnicode */
	font-size: 48px;
	color: #ffefd5;
}
※HTML・JavaScriptはSample.1-1と同じ、CSSはSample.1-1に上記を追加

"\f100"等の部分を変えれば、　 や、　など、他のアイコンも表示できます。
Font Awesomeのチートシートはこちら。
Font Awesome 5 Cheatsheet
https://fontawesome.com/cheatsheet
Quickly copy and paste the glyph, name, or unicode value of any Font Awesome icon
fontawesome.com
（外部サイト）
 

次は、ボタンを画像にする場合。
例えば、次ページへのボタンをこの画像にして、

前ページへのボタンをこれを左右反転したものにするとします。

Sample. 1-6
Slide 1
Slide 2
Slide 3
Slide 4

CSS
/* 前ページ、次ページボタン共通のスタイル */
.swiper-button-prev,
.swiper-button-next {
	width: 48px; /* ボタンの幅 */
	height: 48px; /* ボタンの高さ */
	background-size: 48px 48px; /* 背景画像としてのサイズ（＝表示したい画像サイズ） */
	margin-top: -24px; /* 縦中央配置用：ボタンの高さの半分のネガティブマージン（top:50%がすでに設定されている） */
}
/* 次ページボタンのスタイル */
.swiper-button-next {
	background-image: url(画像アドレス);
}
/* 前ページボタンのスタイル */
.swiper-button-prev {
	background-image: url(画像アドレス);
	transform: scale(-1, 1); /* 左右反転 */
}
※HTML・JavaScriptはSample.1-1と同じ、CSSはSample.1-1に上記を追加

margin-topについて少し補足。
CSS内コメントにも書いているように、前・次ページボタンにはデフォルトで
top: 50%;
margin-top: -22px;（デフォルトボタンの高さ44pxの半分のネガティブマージン）
が設定されています。（position: absoluteも）
これを図解すると、
top: 50%だけ設定した状態

margin-top: -（ボタンの高さの半分）pxも設定

となります。
スライドとボタンの縦中央位置を揃えるポイントが、ボタンの高さの半分のネガティブマージンなんです。


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


bulletsタイプ

bulletタイプの基本はこう。

Sample. 2-1-1
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

HTML
<!-- Swiper START -->
<div class="swiper-container">
	<!-- メイン表示部分 -->
	<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 -->
JavaScript
var mySwiper = new Swiper('.swiper-container', {
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true,
	}
});
※CSSはSample.1-1と同じ

さて、これもデフォルトでは青丸ですが、白・黒にするのはクラス名を追加するだけ。
白バージョン。
Sample. 2-1-2
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

HTML
<!-- Swiper START -->
<div class="swiper-container">
	<!-- メイン表示部分 -->
	<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 swiper-pagination-white"></div>
</div>
<!-- Swiper END -->
※JavaScriptはSample.2-1-1、CSSはSample.1-1と同じ

黒バージョン。
Sample. 2-1-3
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

HTML
<!-- Swiper START -->
<div class="swiper-container">
	<!-- メイン表示部分 -->
	<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 swiper-pagination-black"></div>
</div>
<!-- Swiper END -->
※JavaScriptはSample.2-1-1、CSSはSample.1-1と同じ

スタイルシートで色や大きさをいじってみたサンプルがこちら。

Sample. 2-1-4
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

CSS
/* 全体のスタイル */
.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; /* 不透明 */
}
※HTML、JavaScriptはSample.2-1-1と同じ、CSSはSample.1-1に上記を追加

今度は、 ○ ● ● ● を画像とにしてみます。

Sample. 2-1-5
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

CSS
/* 全体のスタイル */
.swiper-pagination-bullet {
	width: 16px;
	height: 16px;
	border-radius: 0%;
	background: url(星の画像のURL) transparent;
	opacity: 0.5;
}
/* 現在のスライドのスタイル */
.swiper-pagination-bullet-active {
	width: 32px;
	height: 32px;
	background: url(ハートの画像のURL);
}
※HTML、JavaScriptはSample.2-1-1と同じ、CSSはSample.1-1に上記を追加

さらにアレンジ。
パラメータ追加で、スライド数が多い時に ○ ● ● ● … を全部表示せず、現在のページ付近以外を省略するように表示することもできます。

Sample. 2-1-6
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true,
		dynamicBullets: true,
		dynamicMainBullets: 1,
	}
});
※HTMLはSample.2-1-1、CSSはSample.1-1と同じ

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
dynamicBulletstrue現在のスライド付近以外の ● を省略する
falseすべての ● を表示する
dynamicMainBullets1等の数値dynamicBulletsがtrueの時、大きく表示する ● の数。増やすと表示される ● の全体数が増える
（例）1の時：
●
●
●
●
●
　3の時：
●
●
● ● ●
●
●
dynamicBullets: trueの時に、CSSで色やサイズを変更してみるとこんな感じ。

Sample. 2-1-7
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true,
		dynamicBullets: true,
		dynamicMainBullets: 3
	}
});
CSS
/* ベースのスタイル */
.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; /* 黄色 */
}
※HTMLはSample.2-1-1と同じ、CSSはSample.1-1に上記を追加

ほほう。
作ってみて始めて知りましたが、現在のスライドはdynamicMainBulletsで指定した一番大きい ● の中央に表示されるとは限らないんですね。

応用編。
下記のようにすると、さらに変わった書式を設定できます。
Sample. 2-1-8
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

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

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
renderBullettype: 'bullets'時にページネーションの書式を設定する
function(index, className) { … }
indexはスライドのインデックス番号、classNameは要素のクラス名。
indexは0から始まることに注意（1枚目：0、2枚目：1、…）。
CSS
/* 全体のスタイル */
.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;
}
※HTMLはSample.2-1-1と同じ、CSSはSample.1-1に上記を追加

fractionタイプ

次はfractionです。
fractionタイプの基本はこう。

Sample. 2-2-1
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	pagination: {
		el: '.swiper-pagination',
		type: 'fraction',
	}
});
※HTMLはSample.2-1-1、CSSはSample.1-1と同じ

文字色やサイズを変更したいときは、.swiper-paginationに対して設定を行えばOK。
CSS
.swiper-pagination {
	font-size: 12px; /* サイズ */
	color: #ffffff; /* 文字色 */
}
さらに細かく書式を設定したい時は下記のように。

Sample. 2-2-2
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

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

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
renderFractiontype: 'fraction'時にページネーションの書式を設定する
function (currentClass, totalClass) { … }
CSS
/* 全体のスタイル */
.swiper-pagination-fraction {
	color: #ffffff;
	font-size: 14px;
}
/* 総スライド数のスタイル */
.swiper-pagination-total {
	color: #ff00ff;
}
/* 現在のスライド番号のスタイル */
.swiper-pagination-current {
	color: #00bfff;
	font-weight: bold;
}
※HTMLはSample.2-1-1と同じ、CSSはSample.1-1に上記を追加


progressbarタイプ

progressbarタイプの基本はこう。

Sample. 2-3-1
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	pagination: {
		el: '.swiper-pagination',
		type: 'progressbar',
	}
});
※HTMLはSample.2-1-1、CSSはSample.1-1と同じ

スタイルシートで大きさや色を変えてみるとこんな感じ。

Sample. 2-3-2
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

CSS
.swiper-container-horizontal > .swiper-pagination-progressbar {
	height: 20px; /* プログレスバーの高さ */
}
.swiper-pagination-progressbar {
	background: rgba(255, 255, 255, 0.5); /* 背景色：白・半透明 */
}
.swiper-pagination-progressbar-fill {
	background: #ffb6c1; /* 塗りつぶし：ピンク */
}
※HTMLはSample.2-1-1、JavaScriptはSample.2-3-1と同じ、CSSはSample.1-1に上記を追加

プログレスバーの方向を変えるパラメータもあります。

Sample. 2-3-3
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

※HTMLはSample.2-1-1、CSSはSample.1-1と同じ
JavaScript
var mySwiper = new Swiper('.swiper-container', {
	pagination: {
		el: '.swiper-pagination',
		type: 'progressbar',
		progressbarOpposite: true,
	}
});

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
progressbarOppositetruetype: 'progressbar'の時のみ有効。横方向のスライドに縦方向のプログレスバー、縦方向のスライドに横方向のプログレスバーを表示
falseスライドの移動方向と同じ向きのプログレスバーを表示
この時に幅を変えたい場合は、スタイルシートで下記のように設定します。
CSS
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
	width: 20px; /* プログレスバーの幅 */
}
色の指定方法はSample.2-3-2と同じ。

応用編。
さらに細かく書式を設定したい時。

Sample. 2-3-4
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

※HTMLはSample.2-1-1、CSSはSample.1-1＋Sample.2-3-2と同じ
JavaScript
var mySwiper = new Swiper('.swiper-container', {
	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>';
		}
	}
});

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
renderProgressbartype: 'progressbar'時にページネーションの書式を設定する。
function (progressbarFillClass) { … }
2色ラインにしてみました。
下半分の白いラインをrenderProgressbarの中で作っています。

customタイプ

bulletsでもfractionでもprogressbarでもない、違う書式にしたいときはtype: 'custom'にします。
renderCustomもセットで設定する必要があります。

Sample. 2-4
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	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 '最初のスライドじゃないよ';
			}
		}
	}
});

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
renderCustomtype: 'custom'時にページネーションの書式を設定する。
function (swiper, current, total) { … }
こんな感じで、何なら1枚ずつ異なる書式にすることもできます。
このサンプルでは幅や高さを表示するぐらいのことしかしていませんが、Swiperのパラメータも参照できるのでおもしろい使い方もできるかも。

CSS
.swiper-pagination-custom {
	color: #ffffff;
	font-size: 13px;
}
※HTMLはSample.2-1-1と同じ、CSSはSample.1-1に上記を追加


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


基本のスクロールバーはこんな感じ。

Sample. 3-1
Slide 1
Slide 2
Slide 3
Slide 4

HTML
<!-- Swiper START -->
<div class="swiper-container">
	<!-- メイン表示部分 -->
	<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 -->
JavaScript
var mySwiper = new Swiper('.swiper-container', {
	scrollbar: {
		el: '.swiper-scrollbar',
		draggable: true,
	}
});
※CSSはSample.1-1と同じ

これをスタイルシートで色やサイズを変えたサンプルはこうなります。

Sample. 3-2
Slide 1
Slide 2
Slide 3
Slide 4

CSS
.swiper-container-horizontal > .swiper-scrollbar {  {
	height: 25px; /* 高さ */
}
.swiper-scrollbar {
	background: rgba(230, 255, 85, 0.3); /* 背景色（現在のスライド以外） */
	border-radius: 50px; /* 丸み */
}
.swiper-scrollbar-drag {
	background: rgba(230, 255, 85, 0.7); /* 背景色（現在のスライド） */
	border-radius: 50px; /* 丸み */
}
※HTML、JavaScriptはSample.3-1と同じ、CSSはSample.1-1に上記を追加


4. 全部付けてみる


そのまま全部足せばOK。
色・サイズの変更方法はこれまでのサンプルと同じ。

Sample. 4
Slide 1
Slide 2
Slide 3
Slide 4

HTML
<!-- Swiper START -->
<div class="swiper-container">
	<!-- メイン表示部分 -->
	<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 -->
JavaScript
var mySwiper = new Swiper('.swiper-container', {
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	},
	scrollbar: {
		el: '.swiper-scrollbar',
		draggable: true,
	}
});
※CSSはSample.1-1と同じ





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


前ページ・次ページボタン、ページネーション、スクロールバーはデフォルトだとスライドの中に表示されます。
場合によってはコンテンツを隠してしまうので、スライドの外側に配置するには下記のようにします。

Sample. 5
Slide 1
Slide 2
Slide 3
Slide 4

HTML
<div class="swiper-parent">
	<!-- Swiper START -->
	<div class="swiper-container">
		<!-- メイン表示部分 -->
		<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>
全体を囲うdivを作り、前ページボタンと次ページボタンの階層を1つ上げます。

CSS
/* Swiperの親要素 */
.swiper-parent {
	position: relative;
}
/* Swiper本体 */
.swiper-container {
	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）の半分のネガティブマージンで上に少しずらす */
}
※JavaScriptはSample.4と同じ、CSSはSample.1-1に上記を追加

☆の項目は、前・次スライドボタンを使用しないときは設定不要。
★の項目は、ページネーション・スクロールバーを使用しないときは不要。

色やサイズの変更は、これまでのサンプルと同様です。


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


Sample. 6-1

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	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,
	}
});
※HTMLはSample.4、CSSはSample.1-1と同じ

direction: 'vertical'で縦方向（上下）に移動します。
この時、ページネーションはtypeがbullets、progressbarの場合は自動で縦向きになります。fraction、customは横向きと同じ位置に表示されます。
スクロールバーも自動で縦向きに。
前・次スライドボタンは横向きのまま。

でも上下に移動するんだから、前・次スライドボタンも上下配置の方がいい気がする。
というわけでやってみた。

Sample. 6-2

CSS
/* 前・次スライドボタン共通スタイル */
.swiper-button-prev, .swiper-button-next {
	transform: rotate(90deg);	/* 元のボタンを90度回転 */
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	margin: 0 auto;	/* 以下、横方向の中央配置用 */
	left: 50%;
	margin-left: -22px;
}
/* 前ページボタン */
.swiper-button-prev {
	top: 5px;		/* 上端からの距離 */
	bottom: auto;
}
/* 次ページボタン */
.swiper-button-next {
	bottom: 5px;	/* 下端からの距離 */
	top: auto;
}
※HTMLはSample.4、JavaScriptはSample.6-1と同じ、CSSはSample.1-1に上記を追加

ついでに、縦向きですべてのナビゲーションをスライドの外側に配置したパターン。

Sample. 6-3

CSS
/* Swiperの親要素 */
.swiper-parent {
	position: relative;
	height: 350px;	/* 全体の高さ：スライドの高さ（250px）＋前・次ページボタンの高さ（50px×2） */
}
/* Swiper本体 */
.swiper-container {
	top: 50px;				/* スライドの上端を前ページボタンの高さの分だけ下げる */
	padding-right: 50px;	/* ページネーション・スクロールバー分の余白を右に取る */
	box-sizing: content-box;
}
/* 前・次スライドボタン共通スタイル */
.swiper-button-prev, .swiper-button-next {
	transform: rotate(90deg);	/* 元のボタンを90度回転 */
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	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;
}
※HTMLはSample.5、JavaScriptはSample.6-1と同じ、CSSはSample.1-1に上記を追加

こんな感じですかね。
必要なカスタマイズを組み合わせて、お好きなデザインを作ってください～。


関連記事
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超...
https://garigaricode.com/swiper
1. Swiperとは1. Swiperとはスライダー（カルーセル）が作れるJavaScriptライブラリです。しかもPCでもスマホでも使えて、レスポンシブ対応可能！jQueryにも依存せず、カスタマイズの自由度も高く、見た目も美しいスライダーがサクッとできちゃう。でも、公式ドキュメントは英語のみ…。今回は、そんなSwiperについて解説していきます。 2. 使うための準備2. 使うための準備CDNからライブラリを読み込む方法が楽でおすすめ。下記のライブラリとスタイルシートを、Swiperを設置したいHTMLに追加します。HTML<link rel="styleshee...
ガリガリコード
 
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超...
https://garigaricode.com/swiper_multirow
このページでは、Swiperを複数行で表示するカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。というわけで、早速カスタマイズしていきましょう。 1. 列（縦方向）優先1. 列（縦方向）優先slidesPerColumnFill: 'column'を指定した時、またはslidesPerColumnFillを省略した時は、こういう並び順になります。Sample.1 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 Slide 11 Slide 12 var mySwiper1 = new Swiper('.samp...
ガリガリコード



ぱんこ

おなごだよ
SE・プログラマーやってたよ
今は事務員のはずだけど開発もさせられるよ

9 Comments

  1. コメント失礼します。
    非常に丁寧な解説で、いつも参考にさせていただいております。

    現在、Swiperで数字ありのページネーション「Sample. 2-1-8」を
    実装したいと考えております。

    しかし、以下の（1）（2）の点でつまずいておりまして、
    宜しければご助言をいただけないでしょうか？

    質問（1）
    ページネーションの指定を下記で行った場合は
    問題なくページネーションが表示されるのですが、

    —ここから—

    pagination: ‘.swiper-pagination’,
    paginationClickable: true,

    —ここまで—

    ページネーションの指定で下記の記述を行うと、途端に
    ページネーション部そのものが非表示になってしまうようです。

    —ここから—

    pagination: {
    el: ‘.swiper-pagination’,
    type: ‘bullets’,
    clickable: true,
    renderBullet: function (index, className) {
    //中に数字を表示
    return ” + (index + 1) + ”;
    }
    }

    —ここまで—

    何か原因が分かりましたら、ご教授いただけないでしょうか？

    （2）また、classNameの部分の指定は下記の記述で問題ございませんでしょうか。

    —ここから—

    pagination: {
    el: ‘.swiper-pagination’,
    type: ‘bullets’,
    clickable: true,
    renderBullet: function (index, ‘.swiper-pagination’) {
    //中に数字を表示
    return ” + (index + 1) + ”;
    }
    }

    —ここまで—

    色々とご質問いたしまして、申し訳ございません。
    どうぞ宜しくお願い申し上げます。

    返信

    1. > おいしい水さん
      まず(2)に関してですが、classNameは別の文字列に置き換えず、そのまま書いてください。（indexも）
      classNameには自動で「swiper-pagination-bullet」または「swiper-pagination-bullet-active」が代入され、
      現在のスライド位置に合わせてcssを切り替えてくれます。

      (1)に関しては、ここのコメントはタグ禁止にしていたかもしれないので消えてしまったのかもしれないんですが、
      return ‘<span class=”‘ + className + ‘”>’ + (index + 1) + ‘</span>’;
      前後のタグ部分もそのまま書いてみてください。

      indexには現在のスライド番号（0から開始）が入るので、HTML上では
      1つめのページネーション：<span class=”swiper-pagination-bullet”>1</span>
      2つめのページネーション：<span class=”swiper-pagination-bullet”>2</span>
      …
      という形式で出力されます。

      そして現在表示中のスライド位置が2枚目なら、
      2つ目のページネーションが<span class=”swiper-pagination-bullet-active”>2</span>
      のように変更されて出力されます。

      span class=”swiper-pagination-bullet”の時とspan class=”swiper-pagination-bullet-active”の時のデザインをそれぞれcssで
      設定してあげれば、例のように切り替わります。

      とりあえずこんなところでしょうか…

      返信

  2. こんにちは。
    とても丁寧な説明でわかりやすく助かっております。

    一つだけ困った事があります。
    単純にナビゲーションの矢印を消して画像に差し替えたいだけなのですが、
    うまくいきません。
    .swiper-button-prev, .swiper-button-nextに
    ｛background-image:none;｝を指定しても何故か消えません。

    それと単純に矢印を消した後に任意の画像に差し替えようと
    .swiper-button-prevと.swiper-button-next に
    background-imageで画像を付けても反映されません。

    何か根本的に間違っている所がありましたらご教示いただけると幸いです。

    返信

    1. コメントの確認が遅くなりすみません。
      もう見てらっしゃらないかもしれませんが、
      矢印を画像にしたいとのことですので、Sample1-6が該当するかと思います。
      やり方としては間違っていないように見受けられますので、別のアプローチとしては
      ・画像までのパスが通っているか確認する
      ・HTMLに記載した前ページボタン、次ページボタンのクラス名（div class=”swiper-button-prev”）とCSSのクラス名が一致しているか確認する
      ・background-imageに!importantをつけて指定し、変更されるか確認する（変更できる場合は、どこかでCSSが上書きされている）
      などでしょうか。
      お試しください。

      返信

      1. swiperの解説わかりやすく、このページは大変助かっています。
        私もリクさんと同じでbackground-image:none;でデフォルトの矢印が消えなかったのですが、以下で消せました。
        初心者なのでちょっとよくわかっていませんが、もし参考になれば幸いです。

        .swiper-button-prev:after {
        display: none;
        }
        .swiper-button-next:after {
        display: none;
        }

        返信

  3. ぱんこさん、初めまして。
    とても詳細な解説ありがとうございます。
    paginationに関してですが、一つのスライダーに対してbulletsとfraction
    異なるタイプを両方設置することは可能でしょうか？
    もし分かりましたらご教示お願いいたします。

    返信

    1. フラグさん、はじめまして。
      customタイプを使えばできそうです。

      Sample. 2-4をベースに、
      renderCustom: function (swiper, current, total) {
      　…
      }
      部分を、

      renderCustom: function (swiper, current, total) {
      var temp = ”;
      for (var i = 1; i <= total; i++) {
      temp += ‘<span class=”‘;
      if (i == current) {
      temp += ‘bulletmain’;
      } else {
      temp += ‘bulletother’;
      }
      temp += ‘”>●</span>’;
      }
      return temp + ‘<br>’ + current + ‘ / ‘ + total;
      }

      として、スタイルシートに

      .bulletmain { opacity: 1; } /* 現在のスライドの●（bullets）の書式 */
      .bulletother { opacity: 0.3; } /* 現在のスライド以外の●（bullets）の書式 */

      と等追加すれば、一つのスライドに

      ●●●●
      1/4

      等と表示されるようになります（中央揃えで）。

      ●と1/4の上下が逆がいいなら、
      return temp + ‘<br>’ + current + ‘ / ‘ + total;
      を
      return current + ‘ / ‘ + total + ‘<br>’ + temp;
      と書き換えてください。

      クラス名や書式はご自由に書き換えてください。
      またこの書き方ならスライド数が増えても自動で対応します。

      返信

  4. 初めてコメントさせて頂きます。よろしくお願いいたします。

    1ページに複数のswiperを設定する時、左右のボタンを外に出す設定をしていると すべてのボタンに反応してしまいます。
    左右のボタンを外に出したまま、複数のswiperを設定するには どこにどう書けばよいでしょうか。

    助言いただけましたら幸いです。

    ps. 当記事の「swiper-parent」では反応せず、別の記事を参照しましたところ「swiper-custom-parent」が有効でした。
    ひょっとしたら これが原因で すべてのボタンに反応してしまっているのでしょうか・・・

    返信

    1. 複数のswiperにすべて同じ名前をつけられているのではないでしょうか？
      JavaScriptの名前およびJavascript中に出てくるCSSを一つずつ別の名前に変更してみてください。
      ↓の場合☆マークがついているところをすべて個別の名前にします。
      もちろん対応するHTMLの方も書き換えてください。

      var mySwiper☆ = new Swiper(‘.swiper-container☆’, {
      navigation: {
      nextEl: ‘.swiper-button-next☆’,
      prevEl: ‘.swiper-button-prev☆’,
      },
      …

      返信

コメントを残す

メールアドレスが公開されることはありません。

Close
Close