今日は最新の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を指定するとアニメーションなしで直接対象に遷移する）
rewindSpeed rewindで巻き戻すときの移動速度をミリ秒単位で指定
width スライダーの最大幅を設定。remや%などの相対単位を指定することも可能
height スライダーの高さを設定。%を除き、remなどの相対単位を指定することも可能
fixedWidth スライドの幅を固定。remや%などの相対単位を指定することも可能
fixedHeight スライドの高さを固定。%を除き、remなどの相対単位を指定することも可能
heightRatio スライドの高さを幅に対する割合で指定
autoWidth 有効にすると、それぞれのスライドの幅をそのまま使用
autoHeight 有効にすると、それぞれのスライドの高さをそのまま使用
start 最初にアクティブになるスライドのインデックスを指定
perPage 1ページに何枚のスライドを表示するかを指定
perMove 1度の移動で、何枚のスライドを移動するかを指定
clones 明示的にクローンスライドの枚数を指定
cloneStatus is-activeクラスをクローンにも追加するかどうかを決定
focus 複数スライドがある場合、どのスライドをアクティブにするかを指定
gap スライド間の余白を指定。CSSの相対単位を指定することも可能
padding スライダーの左右、あるいは上下の余白を指定。CSSの相対単位を指定することも可能
arrows 矢印ボタンを表示するかどうかを指定
pagination ページネーションを表示するかどうかを指定
easing CSSトランジションに使用するタイミング関数を指定
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」を有効にした際に現れる余白を取り除くかどうかを決定
updateOnMove is-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について学ぶならコチラの書籍がオススメです。

JavaScript コードレシピ集