Splide.jsは、軽量でありながら高機能、そしてアクセシビリティにも配慮された、モダンなJavaScriptスライダーライブラリです。jQueryなどの他のライブラリに依存せず、単体で動作するのが大きな特徴です。TypeScriptで開発されているため、ReactやVue.jsなどの現代的なフロントエンドフレームワークとの連携もスムーズに行えます。
この記事では、Splide.jsの基本的な使い方から、応用的なカスタマイズ方法までを分かりやすく解説します。
基本的な使い方
まずは、Splide.jsを導入し、基本的なスライダーを設置する手順を見ていきましょう。
インストール
Splide.jsを利用するには、主に2つの方法があります。
1. CDNを利用する
手軽に試したい場合は、CDNを利用するのが最も簡単です。HTMLファイルの<head>タグ内に以下のコードを追加します。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>2. npm / Yarn でインストールする
プロジェクトに組み込む場合は、npmやYarnを使ってインストールするのが一般的です。
# npm
npm install @splidejs/splide
# Yarn
yarn add @splidejs/splideHTMLの構造
Splide.jsには、特定の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: スライダー全体を囲むコンテナ.splide__track: スライドを直接囲む要素.splide__list: スライドをリストとしてまとめる<ul>要素.splide__slide: 各スライドとなる<li>要素
JavaScriptでの初期化
HTMLを記述したら、JavaScriptでSplide.jsを初期化します。
document.addEventListener( 'DOMContentLoaded', function() {
var splide = new Splide( '.splide' );
splide.mount();
} );これで、基本的なスライダーが表示されます。
主要なオプション
Splide.jsは豊富なオプションが用意されており、スライダーの挙動を細かくカスタマイズできます。
| オプション | 説明 | 例 |
|---|---|---|
type | スライダーの種類を指定します。 – slide: 標準的なスライド– loop: 無限ループ– fade: フェード切り替え | { type: 'loop' } |
perPage | ページごとに表示するスライドの数を指定します。 | { perPage: 3 } |
autoplay | スライダーを自動再生します。 | { autoplay: true } |
arrows | 左右の矢印ナビゲーションの表示/非表示を切り替えます。 | { arrows: false } |
pagination | ページネーション（ドットナビゲーション）の表示/非表示を切り替えます。 | { pagination: false } |
gap | スライド間の余白（マージン）を指定します。 | { gap: '1rem' } |
これらのオプションは、new Splide()の第2引数にオブジェクトとして渡します。
var splide = new Splide( '.splide', {
type : 'loop',
perPage : 3,
autoplay : true,
} );応用的な使い方
カルーセル
複数のスライドを同時に表示するカルーセルを作成するには、perPageオプションを使用します。
var splide = new Splide( '.splide', {
perPage: 3,
gap : '1rem',
} );サムネイル付きスライダー
メインスライダーと連動するサムネイルスライダーを実装することも可能です。
HTML
<!-- Main Splide -->
<div id="main-slider" class="splide">
...
</div>
<!-- Thumbnail Splide -->
<div id="thumbnail-slider" class="splide">
...
</div>JavaScript
document.addEventListener( 'DOMContentLoaded', function () {
var main = new Splide( '#main-slider', {
type : 'fade',
rewind : true,
pagination : false,
arrows : false,
} );
var thumbnails = new Splide( '#thumbnail-slider', {
fixedWidth : 100,
fixedHeight : 60,
gap : 10,
rewind : true,
pagination : false,
isNavigation: true,
focus : 'center',
} );
main.sync( thumbnails );
main.mount();
thumbnails.mount();
} );isNavigation: trueオプションとmain.sync(thumbnails)がポイントです。
縦方向スライダー
directionオプションを使うと、スライダーを縦方向に変更できます。
var splide = new Splide( '.splide', {
direction: 'ttb', // 'ttb' は top to bottom の略
height : '10rem',
} );まとめ
Splide.jsは、その軽量さと豊富な機能、そしてカスタマイズ性の高さから、多くのWebサイトで採用されています。基本的な使い方をマスターすれば、あとはオプションを組み合わせることで、様々なデザインのスライダーを簡単に実装できます。
