初心者のためのSplide.jsガイド：スライダー作成の新たな選択肢

2023年7月4日2023年11月21日

Webエンジニアのみなさんこんにちは！突然ですが、みなさんはSplide.jsというツールをご存じでしょうか？

Splide.jsとは、純粋なJavaScriptとCSSだけで構成されているスライダー／カルーセルライブラリのことです。

jQuery非依存かつ圧縮版で11kBと軽量で、最新のモダンブラウザやIE10以降に幅広く対応しています。

今回は、そんなSplide.jsを使ってスライダーを作成する方法について解説します！

Splide.jsの基本的な使い方

まずは、Splide.jsの基本的な使い方からみていきましょう。

以下の手順でSplide.jsをインストールすると、基本的なスライダーを作成できるようになります。

1. インストール

はじめに、NPMを使ってSplide.jsをインストールします。

bash

$ npm install @splidejs/splide

または、CDNを利用してもOKです。

html

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

2. CSSの読み込み

Splide.jsには、あらかじめ矢印やページング、プログレスバーなどのスタイルが設定されているsplide.min.cssと、外観をゼロからカスタマイズできるsplide-core.min.cssの2つのパターンがあります。

作成にあたって、適切なCSSを選んで読み込みましょう。

html

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

3. HTMLの作成

次に、スライダーを表示するための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>

4. JavaScriptの実装

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

javascript

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

NPMを使用している場合は、Splideモジュールからクラスをインポートして、インスタンス化を行います。

javascript

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

これで、基本的なスライダーの作成は完了です！

グリッドスライダーの作成

次に、Splide.jsの拡張機能を使って、より複雑なグリッドスライダーを作成してみましょう。

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

1. 拡張機能のインストール

まずは、NPMを使って拡張機能をインストール。

bash

$ npm install @splidejs/splide-extension-grid

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

javascript

import Splide from '@splidejs/splide';
import Grid from '@splidejs/splide-extension-grid';
new Splide( '.splide' ).mount( { Grid } );

2. オプションの設定

グリッドスライダーを作成するには、Splideのオプションを適切に設定する必要があります。

こちらは、グリッドスライダーのオプション設定の一例です。

javascript

new Splide( '#example-grid', {
　type: 'loop',
　height: '20rem',
　gap: '1em',
　perPage: 2,
　perMove: 1,

　grid: {
　　dimensions: [ [ 1, 1 ], [ 2, 2 ], [ 2, 1 ], [ 1, 2 ], [ 2, 2 ], [ 3, 2 ] ],
　gap: {
　　row: '1em',
　　col: '1em'
　}
　},

　breakpoints: {
　　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 } )

この設定では、ブレイクポイント600px以上ではスライドの数を6つに、600px以下では7つに可変させることができます。