Java Script / JQuery

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

目次

このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。
Swiperとはなんぞやという方はこちらをご参照ください。

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





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;
}
※別途ライブラリの読み込みが必要です。
わからない方は基礎編参照

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

ではまず白バージョン。

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のチートシートはこちら。

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

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

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-1Sample.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に上記を追加

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


関連記事



ぱんこ

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

コメントを残す

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

Close
Close