サキ今回はSplideスライダーについて解説していきます！
とても人気があり、個人的にはSwiperやslickよりおすすめです。
Splideとは
Splideは、軽量かつ高機能なJavaScriptのスライダーライブラリです。
スライダーを簡単に実装できるだけでなく、レスポンシブ対応や多彩なカスタマイズが可能な点が特徴です。
Splideの特徴
主に以下のような点が挙げられます。
- 他のライブラリに依存しない
- 容量がとにかく軽い
- アクセシビリティへの配慮
- ドキュメントが日本語対応
- リキッドレイアウトやレスポンシブ対応しやすい
アクセシビリティへの配慮がされており、Lighthouse（PageSpeed Insights）でエラーも起きません。
公式が日本語ドキュメントで非常に詳しく網羅的に解説をしており、今回はとりあえず使ってみたいという人のために最速導入方法をお伝えしていきます。
CSS命名規則はBEMを採用しており、サイト側でBEMのCSS記法を採用している場合は親和性も高いです。
また、オープンソースであり、無料で使用できるため、個人サイトから大規模なプロジェクトまで幅広く活用されています。
Splideの基本的な使い方
Splideの基本的な使い方を解説します。
簡単に説明していますので、詳しく知りたい方は公式のページをご確認ください。
Splideのインストール方法
Splideを使用するためには、まずライブラリをインストールします。
CDNを使う方法と、直接ダウンロードする方法があります。
今回はnpmインストールやインテグレーション用パッケージでの実装方法は初心者用ということで割愛します。
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>@latestは最新版という意味です。
CDNの場合でアップデートされると困る場合は、@の後にバージョン番号を指定します。
ダウンロードして使う場合
https://github.com/Splidejs/splide/releases/latest
上記のリンクへアクセスするとSplide最新版のGithubのページが表示されます。
AssetsにあるSourse code(zip)をクリックすると一括でダウンロードできます。
dist/css/splide.min.cssとdist/js/splide.min.jsを自身のプロジェクトへ移動し、それぞれlinkタグとscriptタグでbodyタグの閉じタグ直前で読み込んでください。
ちなみにファイル名にあるminは圧縮と言う意味です。
<link rel="stylesheet" href="path/splide.min.css" /><script src="path/splide.min.js"></script>スライダーの実装
HTMLにスライダー用のマークアップを作成します。
今回は実装のみの説明のため、aria-labelなどについては解説しません。
<div id="splide" class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">Slide 1</li>
<li class="splide__slide">Slide 2</li>
<li class="splide__slide">Slide 3</li>
</ul>
</div>
</div>次にJavaScriptで初期化処理を行います。
こちらの処理はscriptタグで読み込んだ後に記述してください。
document.addEventListener('DOMContentLoaded', function () {
new Splide('#splide').mount();
});これで設定は完了です。
Splideのカスタマイズ方法
Splideは多くのオプションを提供しており、スライダーの動作を簡単にカスタマイズできます。以下は代表的なオプションです。
new Splide('#splide', {
type : 'loop',
perPage : 3,
autoplay: true,
interval: 3000,
pagination: false,
}).mount();ype: スライダーの動作タイプ（loopで無限ループ）perPage: 1ページに表示するスライド数autoplay: 自動再生の有無interval: 自動再生時の間隔（ミリ秒）pagination: ページネーションの表示非表示
より詳しく知りたい方は公式ページをご確認ください。
JavaScriptで挙動の制御、CSSでレイアウトを調整できる他、プラグインを使用して機能拡張することも可能です。
よくある動作不良
Splideを使っていると、以下のような問題に遭遇することがあるかもしれません。
スライダーが動作しない場合は以下を確認してみてください。
- 指定のライブラリが読み込まれているか
- HTMLとクラスの構造が合っているか
- 検証ツールのコンソールタブにエラーが出ていないか
- DOM読み込み後（DOMContentLoaded）に処理を記述しているか
- 初期化時のidやclassが間違ってないか
最後に
Splideは、シンプルで高いカスタマイズ性を持つスライダーライブラリです。
基本的な使い方に加えて、オプション設定やプラグインによって、様々なニーズに対応できます。
カスタマイズなどはまた機会があれば、詳細に記事にさせていただきます。
よく使用する機能だからこそ、しっかりとライブラリ選定し、使い方を覚えるようにしていきたいですね。
