ブログ

2021.05.07

Splide.jsでかんたん可変グリッドスライダー

JavaScript

Splide.jsとは
インストール
CSS
HTML
JS
グリッドスライダーの実装
インストール（splide-extension-grid）
オプション設定
その他の拡張機能
おわりに

Splide.jsとは

純粋なJSとCSSのみで書かれているスライダー／カルーセルです。
jQuery非依存、軽量（圧縮版で11kB）で、最新のモダンブラウザに加えてIEも10以降に対応しています。利用もMITライセンスです。公式サイトはこちら。ドキュメントは英語ですが、作者は日本人の方のようです。

比較的新しいライブラリらしく、githubのスター数はまだ少ないですが使用感としてはswiperやslickに備わっている機能は概ね揃っている印象でした。

ともあれ、可変グリッドスライダーis何という感じもしますので先に結果をお見せしますと以下のようなスライダーを実装することができます。

一見すると普通のスライダーのように見えますが、ソースのHTMLを見てみると数字が振ってある要素が全て兄弟要素になっています。

背景色が変化している部分がアクティブなスライドです。
スライドの枚数はPC時（ブレイクポイント600px以上）6枚、SP時（ブレイクポイント600px以下）7枚に設定しています。

ウィンドウサイズを縮めてみるとグリッドのレイアウトが変化しているのがわかるかと思います。

インストール

NPM（推奨）※適宜webpack等でコンパイルしてください

$ npm install @splidejs/splide

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>

CSS

インストールすると /dist/css/ ディレクトリに2つのcssが入っていますが、矢印やページング、プログレスバーなどデフォルトでスタイルが全部設定されているものが splide.min.css になります。

外観をゼロから完全にカスタマイズする場合は splide-core.min.css を利用します。

CDNはこちら。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">

上記のCSSを環境に合わせて読み込んでください。

HTML

基本的なHTML構造は次のとおりです。

<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 要素の中に、画像などのコンテンツを挿入します。
ul や li の代わりに div 要素を使うこともできます。

JS

最後に、SplideをHTML要素に適用します。

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

NPMユーザーの場合はSplideモジュールからクラスをインポートしてインスタンス化します。

import Splide from '@splidejs/splide';
new Splide( '.splide' ).mount();

グリッドスライダーの実装

以上がSplide.jsの基本的な利用方法になりますが、ここからグリッドスライダーを実装していきます。

グリッドスライダーは splide-extension-grid という拡張機能を追加でインストールすることで利用できるようになります。

インストール（splide-extension-grid）

NPM（推奨）

$ npm install @splidejs/splide-extension-grid

インストールしたら拡張機能をSplideにマウントします。

import Splide from '@splidejs/splide';
import Grid from '@splidejs/splide-extension-grid';

new Splide( '.splide' ).mount( { Grid } );

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-grid@0.1.2/dist/js/splide-extension-grid.min.js">

※上記CDNのバージョン番号は一例です。利用の際は最新バージョンをご利用ください。

ファイルを含めた後、拡張機能をSplideにマウントします。

new Splide( '.splide' ).mount( window.splide.Extensions );

オプション設定

下記が記事冒頭に掲載したスライダーのオプション設定になります。

new Splide( '#example-grid', {
	type: 'loop', // スライダーの種類 @type: { string }, default: 'slide'
	height: '20rem', // スライダーの高さ @type: { number|string }, default: ０
	gap: '1em', // スライド間のギャップサイズ @type: { number|string }, default: ０
	perPage: 2, // 1ページに表示するスライドの数 @type: { number }, default: ０
	perMove: 1, // スライダーが移動するスライドの数 @type: { number }, default: ０
	grid: {
		dimensions: [ [ 1, 1 ], [ 2, 2 ], [ 2, 1 ], [ 1, 2 ], [ 2, 2 ], [ 3, 2 ] ], // 配列としてのディメンション（行と列）のコレクション @type: { Array|boolean }, default: false
		gap: { // オブジェクトとしての行と列のギャップサイズ @type: { Object }, default: {}
			row: '1em',
			col: '1em'
		}
	},
	breakpoints: {  // ブレークポイントの定義 @type: { boolean|Object }, default: false
		600: {
			height: '10rem',
			perPage: 1,
			grid: {
				dimensions: [ [ 2, 2 ], [ 1, 1 ], [ 2, 1 ], [ 1, 2 ], [ 2, 2 ], [ 1, 3 ], [ 3, 1 ] ],
		                gap: {
			                row: '.5em',
			                col: '.5em'
                                }
			}
		}
	}
} ).mount( { Grid } )

グリッドの指定は dimensions プロパティに定義します。

寸法（行と列）のコレクションは配列で指定し、例えば値が [ 1, 1 ], [ 2, 2 ] の場合、最初のスライドは 1 x 1（1行1列）のグリッド、次のスライドは 2 x 2（2行2列）になります。

上記のオプションでは、ブレイクポイント600px以上ではスライドの数を6つに、600px以下では7つに可変させているため配列の個数も変化しています。

HTMLの構造はグリッドでも変わりません。グリッドオプションを無効にすれば通常の1枚ずつのスライダーになります。

<div id="example-grid" class="splide">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">01</span></li>
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">02</span></li>
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">03</span></li>
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">04</span></li>
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">05</span></li>
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">06</span></li>
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">07</span></li>
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">08</span></li>
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">09</span></li>
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">10</span></li>
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">11</span></li>
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">12</span></li>
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">13</span></li>
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">14</span></li>
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">15</span></li>
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">16</span></li>
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">17</span></li>
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">18</span></li>
			<li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">19</span></li>
		</ul>
	</div>
</div>

その他の拡張機能

グリッド機能の他にも、Splide.jsには以下のような拡張機能を追加でインストールすることができます。

Video
スライダーにyoutubeやvimeo、HTMLのvideoタグといった動画を割り当てることができます。動画の再生／停止などの挙動をスライドの切り替えと連動して動かすことができ、そのための様々なオプションやイベントが用意されています。
URLハッシュナビゲーション
スライダーをURLハッシュの変更に対応させることができます。DEMOページで実際にスライダーを切り替えてみると、ハッシュの変更だけでなくブラウザの戻る／進むにもスライダーが連動しているのがわかります。

おわりに

今回は主にグリッド機能に焦点を絞ってご紹介しましたが、このSplide.jsは拡張機能を使わずともデフォルトでswiperやslickといったライブラリのような機能性とパフォーマンスを感じました。

また、VueやReact用のコンポーネントもあるみたいですので今後のスライダー／カルーセルライブラリの選択肢の一つとして考えてみてもいいのではないでしょうか。