Splide.jsの使い方：高機能な国産カルーセルスライダー

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>
HTML

2. npm / Yarn でインストールする

プロジェクトに組み込む場合は、npmやYarnを使ってインストールするのが一般的です。

# npmnpm install @splidejs/splide# Yarnyarn add @splidejs/splide
PowerShell

HTMLの構造

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>
HTML
  • .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();} );
JavaScript

これで、基本的なスライダーが表示されます。

主要なオプション

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,} );
JavaScript

応用的な使い方

カルーセル

複数のスライドを同時に表示するカルーセルを作成するには、perPageオプションを使用します。

var splide = new Splide( '.splide', { perPage: 3, gap : '1rem',} );
JavaScript

サムネイル付きスライダー

メインスライダーと連動するサムネイルスライダーを実装することも可能です。

HTML

<!-- Main Splide --><div id="main-slider" class="splide"> ...</div><!-- Thumbnail Splide --><div id="thumbnail-slider" class="splide"> ...</div>
HTML

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();} );
JavaScript

isNavigation: trueオプションとmain.sync(thumbnails)がポイントです。

縦方向スライダー

directionオプションを使うと、スライダーを縦方向に変更できます。

var splide = new Splide( '.splide', { direction: 'ttb', // 'ttb' は top to bottom の略 height : '10rem',} );
JavaScript

まとめ

Splide.jsは、その軽量さと豊富な機能、そしてカスタマイズ性の高さから、多くのWebサイトで採用されています。基本的な使い方をマスターすれば、あとはオプションを組み合わせることで、様々なデザインのスライダーを簡単に実装できます。

read next