BLOG

ブログ

programming

2025.03.01

jQueryに依存しない軽量スライダー「Splide」

みなさんこんにちは、ティウェブ佐藤です。

Webサイトでは「slick」や「Swiper」などのライブラリが使用された
スライダー（スライドショー・カルーセル）をよく見かけますよね。

省スペースで効率的に情報提供ができたり、見た目が少しリッチになるスライダーですが、今回はjQueryに依存しない軽量スライダーライブラリ「Splide」について調べてみました。

「Splide」って？

「Splide」の特徴

jQieryに依存せずに動作
ファイルが軽量（29KB）
アクセシビリティに配慮されている
レスポンシブ対応
ドキュメントが日本語対応でカスタマイズしやすい

今までは「slick」や「Swiper」などが主流でしたが、基本的なスライダーの機能が揃っていることや、オプションが豊富でカスタマイズのしやすさなどから最近注目されているのがこの「Splide」です。

「Splide」と他ライブラリ（slick・Swiper）との比較

機能面では「Splide」と「slick」はあまり変わらない印象です。
しかし「slick」はjQueryを使用するため、「Splide」よりも読み込むファイルは重くなります。

「Swiper」はjQueryを使用せず「Splide」よりも機能が充実していますが、読み込むファイルは「Splide」の方が軽量であるため、これといった理由がなければ、「Splide」を使用するのがいいかもしれません。

公式ドキュメントが日本語対応

なんといってもこれが一番嬉しいですね……！

「slick」や「Swiper」は公式ドキュメントが英語のみとなっており、日本語の参考サイトを探して実装することが多いかと思いますが、「Splide」は開発者が日本の方で公式ドキュメントが日本語となっているためとても便利ですね。

「Splide」の導入方法

「Splide」の導入方法は2種類あります。

CDNを使用
必要なファイルをダウンロードして使用

こちらでは導入が簡単であるCDNを使用する場合を解説します。

①CDNを読み込む

「Splide」の導入に必要なCDNを読み込みます。

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

②HTMLを記述

スライダー部分のHTMLを記述します。

<div class="splide" role="group" aria-label="Splideの導入方法">
  <div class="splide__track">
	<ul class="splide__list">
		<li class="splide__slide">スライド01</li>
		<li class="splide__slide">スライド02</li>
		<li class="splide__slide">スライド03</li>
	</ul>
  </div>
</div>

③`<script>`にて「Splide」を適用

記述したHTMLに対して<script>にて「Splide」を適用します。
対象となる要素がすでにロードされている必要があるので、</body>の直前などに記載します。

<script>
  new Splide(".splide", {
    type: "loop", // ループ（カルーセル）スライダー
    perPage: 1, // 1ページに何枚のスライドを表示するか
    arrows: true, // 矢印ボタンを表示するかどうか
    pagination: true, // ページネーションを表示するかどうか
  }).mount();
</script>

①～③で「Splide」の導入は完了します。デモページはこちら。
「slick」や「Swiper」などと導入コストもさほど変わらないかつ軽量なため、とても注目できるスライダープラグインですね。