今日は最新のJavaScriptスライダー[Splide]を紹介します。

まずは[Splide.js]の特徴をいくつかピックアップします。

  • jQueryなどのライブラリに依存せず単体で動く
  • 軽量(圧縮版で11kB)
  • IE10以降対応
  • ブレイクポイントの指定でレスポンシブ対応
  • マウスのドラッグとタッチスワイプに対応
  • SEOフレンドリー

スライダー、またはスライドショー、カルーセルに必要とされる要素はすべて揃っており、近年評価が高い[swiper.js]や[slick.js]などと肩を並べられるスペックです。

Splide → https://splidejs.com

[Splide]本体ファイルをインストール

Splide.jsをウェブサイトにインストールする方法は3つあります。

  1. NPMでダウンロード
  2. CDNを利用
  3. Githubからダウンロード
1.NPMの場合
$ npm install @splidejs/splide

こちらは適宜webpack等でコンパイルしてください。

2.CDNを利用する場合
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>

上記のコードをHTMLの任意の場所で読み込んでください。

3.Githubからダウンロードする場合

公式のGithubからダウンロード可能です。

Splidejs:https://github.com/Splidejs/splide

上記リンク先のページ内、緑色のボタン「Code▼」をクリック、さらに「Download Zip」でファイル一式をダウンロードできます。

ZIPファイルを展開するといくつかのフォルダとファイルが梱包されていますが、使用するのは「splide.min.css」と「splide.min.js」になります。
この2つのファイルは<head>〜</head>内、またはHTMLの適当な場所で読み込んでおきましょう。

HTML

Splideの基本的なマークアップは以下のとおり。

<div class="splide">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 01</li>
			<li class="splide__slide">Slide 02</li>
			<li class="splide__slide">Slide 03</li>
		</ul>
	</div>
</div>

.splide__slideが付与された各スライドの中に、画像やテキストなどの任意のコンテンツを入れることができます。

Splideの初期化

記述したHTMLに対してSplideを適用します。

<script>new Splide( '.splide' ).mount();</script>

ちなみにheadタグ内で初期化を行うなど、対象となる要素がロードされていない段階で初期化の処理を記述する場合、次のようにしてロードタイミングを監視しします。

<script>
	document.addEventListener( 'DOMContentLoaded', function() {
		var splide = new Splide( '.splide' );
 		splide.mount();
	});
</script>

記述したHTMLをまとめると次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
</head>
<body>
<div class="splide">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 01</li>
			<li class="splide__slide">Slide 02</li>
			<li class="splide__slide">Slide 03</li>
		</ul>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
<script>new Splide( '.splide' ).mount();</script>
</body>
</html>

以上で最低限は動くようになります。

サンプルを用意したのでご確認ください。

Splide.js → オンズのサンプル

オプション設定の設定方法

Splide.jsには多くのオプションが用意されています。

JavaScriptでオプション指定

オプション設定は次のように行います。

<script>
new Splide( '.splide', {
	type : 'loop',
	perPage: 3,
}).mount();
</script>
データ属性でオプションを指定

data-splide属性を使って、HTMLでオプションを指定することも可能です。
このとき、属性の値はJSONフォーマットで指定します。

<div class="splide" data-splide='{"type":"loop","perPage":3}'>
...
<div/div>

JSON内でダブルクォートを使用するため、上記の例では属性の値をシングルクォートで囲っています。 "によりJSONの値をエスケープすれば、属性にダブルクォートを用いることもできます。

[Splide.js]のオプション一覧

名称内容
typeスライダーのタイプ:「slide」「loop」「fade」から指定
rewindスライダーの終わりまで行ったときに、先頭に巻き戻す
speedスライダーの移動速度をミリ秒単位で指定(0を指定するとアニメーションなしで直接対象に遷移する)
rewindSpeedrewindで巻き戻すときの移動速度をミリ秒単位で指定
widthスライダーの最大幅を設定。rem%などの相対単位を指定することも可能
heightスライダーの高さを設定。%を除き、remなどの相対単位を指定することも可能
fixedWidthスライドの幅を固定。rem%などの相対単位を指定することも可能
fixedHeightスライドの高さを固定。%を除き、remなどの相対単位を指定することも可能
heightRatioスライドの高さを幅に対する割合で指定
autoWidth有効にすると、それぞれのスライドの幅をそのまま使用
autoHeight有効にすると、それぞれのスライドの高さをそのまま使用
start最初にアクティブになるスライドのインデックスを指定
perPage1ページに何枚のスライドを表示するかを指定
perMove1度の移動で、何枚のスライドを移動するかを指定
clones明示的にクローンスライドの枚数を指定
cloneStatusis-activeクラスをクローンにも追加するかどうかを決定
focus複数スライドがある場合、どのスライドをアクティブにするかを指定
gapスライド間の余白を指定。CSSの相対単位を指定することも可能
paddingスライダーの左右、あるいは上下の余白を指定。CSSの相対単位を指定することも可能
arrows矢印ボタンを表示するかどうかを指定
paginationページネーションを表示するかどうかを指定
easingCSSトランジションに使用するタイミング関数を指定
easingFuncフリードラッグモードなどで使用する補間関数を指定
dragドラッグ操作でスライダーを動かせるかどうかを指定
noDragセレクタでドラッグできない要素を指定
dragMinThresholdドラッグとみなされる最小移動距離を指定
flickPowerフリックしたに際どのくらいの距離を移動するかを指定する
flickMaxPagesフリックにより移動できる最大ページ数を指定
waitForTransitionスライダーが移動中にも操作を受け付けるかどうかを指定
arrowPath矢印に使われるSVGのパス。例:‘m7.61 0.807-2.12…’
autoplay自動再生を有効にするかどうかを指定
interval自動再生の間隔をミリ秒単位で指定
pauseOnHoverマウスオーバーしたときに自動再生を停止するかどうかを指定
pauseOnFocusスライダー内にフォーカスされた要素がある場合、自動再生を停止するかどうかを指定
resetProgress自動再生が中断されたのち、再開する際にそれまでの経過時間を維持するか破棄するかを指定
lazyLoad遅延読み込みを有効化するかどうかを指定
preloadPages遅延読み込みの際、事前に何ページ分読み込むかを指定
keyboardキーボード操作を有効にするかどうかを指定
wheelマウスホイールによるスライダーの移動を有効にするかどうかを指定
directionスライダーの方向を指定
cover画像のsrcをその親要素のbackground-imageに変換するかどうかを指定
slideFocus見えているスライドに対してtabindex=”0″を追加するかどうかを決定
isNavigation他のスライダーのナビゲーションとして、それぞれのスライドをクリック可能にするかどうかを決定
trimSpaceオプション「focus」を有効にした際に現れる余白を取り除くかどうかを決定
updateOnMoveis-activeクラスを移動前に更新するかどうかを決定
mediaQueryブレークポイントに min-width or max-width のどちらを使うかを指定
breakpoints各ブレークポイントにおけるオプションを指定
classesクラス名を追加するためのオブジェクト
i18nローカライズ用のテキストを変更するためのオブジェクト
destroyスライダーを破棄するかどうかを決定

充分すぎる設定項目が用意されていますね。これだけオプションがあれば自由自在にスライダーを設定できそうです。

オプション設定サンプル

以下、オプションの中からいくつかをピックアップした設定のサンプルを紹介します。

<script>
new Splide( '.splide', {
	type : 'loop',
	speed: 600,
	padding: '20%',
	perPage: 3,
	perMove: 1,
	wheel: true,
	releaseWheel: true,
	trimSpace: false,
	focus: 'center',
	updateOnMove: false,
	breakpoints: {
		640: {
			perPage: 2,
		},
		500: {
			destroy: true,
		},
	}
}).mount();
</script>

ちなみに本プラグイン開発者は日本人のエンジニアの方。
公式ドキュメントが完全に日本語に対応しているので英語が苦手な初心者ウェブデザイナーにもオススメできます。

詳しくは Splide の公式ページへ。
実際のデモも多数用意されています。

Splide:https://splidejs.com

最後に。JavaScriptについて学ぶならコチラの書籍がオススメです。