簡単・軽量な国産JSスライダーSplideの使い方とカスタマイズ方法

2024.06.07

技術のこと

jsプラグイン

Splideとは？

Splide.jsは、日本発の軽量かつ高機能なJavaScriptスライダープラグインです。シンプルなコードで美しいスライダーを実装できるため、多くの開発者に愛用されています。
ファイルサイズが29KBとかなり軽く、ドキュメントも日本語のため便利です。
また、jQueryではなくjavascriptで開発されているため、例えば既存のプロジェクトにスライダーを追加する場合など、jQueryの有無やバージョンを気にする必要が無いため導入しやすいと思います。
オプションやAPIに関しても、他のスライダープラグインにできることは大体Splideでもできる、という印象です。

Splide.jsの基本的な使い方

まずは、Splide.jsを導入する方法を紹介します。公式サイトから最新のライブラリをダウンロードするか、CDNを利用して簡単にセットアップできます。

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

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

<link rel="stylesheet" href="(cssへのパス)/css/splide.min.css">
<script src="(jsへのパス)/js/splide.min.js"></script>

<!-- Initialize Splide -->
<script>
 document.addEventListener('DOMContentLoaded', function () {
   var splide = new Splide('#splide');
   splide.mount();
});
</script>

HTML
xxxxxxxxxx
 
<link rel="stylesheet" href="(cssへのパス)/css/splide.min.css">
<script src="(jsへのパス)/js/splide.min.js"></script>
​
<!-- Initialize Splide -->
<script>
 document.addEventListener('DOMContentLoaded', function () {
   var splide = new Splide('#splide');
   splide.mount();
});
</script>

CDNを利用して読み込む場合は以下

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

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

デフォルトで組み込むとこんな感じ

よく使うオプション設定方法

一般的によく使うと思われるオプションをまとめました。

document.addEventListener('DOMContentLoaded', function () {
   var splide = new Splide('#splide', {
       type: 'loop',  
       autoplay: true,
       perPage: 2,
       speed: 600,
       interval: 6000,
       arrows: false,
       pagination: false,
       pauseOnHover: false,
       easing: 'ease-in-out',
   });
   splide.mount();
});

JavaScript
xxxxxxxxxx
 
document.addEventListener('DOMContentLoaded', function () {
   var splide = new Splide('#splide', {
       type: 'loop',  
       autoplay: true,
       perPage: 2,
       speed: 600,
       interval: 6000,
       arrows: false,
       pagination: false,
       pauseOnHover: false,
       easing: 'ease-in-out',
   });
   splide.mount();
});

type	スライダーのタイプ ‘slide’ 一般的なスライダー。最後のスライドになると止まるのであまり使わないような.. ‘loop’ ループ（カルーセル）スライダー。こちらの方がよく使いそう。 ‘fade’ 各スライドをフェードにより切り替える。perPageと併用不可
autoplay	自動再生を有効にするかどうか
perPage	1ページに表示するスライド数を設定
speed	スライダーの移動時間（アニメーション速度）をミリ秒単位で指定
interval	自動再生の間隔をミリ秒単位で指定
arrows	矢印ボタンを表示するかどうか
pagination	ページネーション（ドット）を表示するかどうか
pauseOnHover	マウスオーバーしたときに自動再生を停止するかどうかを決定
easing	linear, ease, cubic-bezier()など、CSSトランジションに使用するタイミング関数を指定。

その他オプションはこちらから

ページネーション、矢印のカスタマイズ方法

次に、ページネーションと矢印のカスタマイズ方法について説明します。

var splide = new Splide('#splide', {
  arrows: true,
  pagination: true,
  classes: {
      // 矢印関連のクラスを追加
		arrows: 'splide__arrows your-class-arrows',
		arrow : 'splide__arrow your-class-arrow',
		prev  : 'splide__arrow--prev your-class-prev',
		next  : 'splide__arrow--next your-class-next',

		// ページネーション関連のクラスを追加
		pagination: 'splide__pagination your-class-pagination', // container
		page      : 'splide__pagination__page your-class-page', // each button
  },
});

splide.mount();

JavaScript
xxxxxxxxxx
 
var splide = new Splide('#splide', {
  arrows: true,
  pagination: true,
  classes: {
      // 矢印関連のクラスを追加
        arrows: 'splide__arrows your-class-arrows',
        arrow : 'splide__arrow your-class-arrow',
        prev  : 'splide__arrow--prev your-class-prev',
        next  : 'splide__arrow--next your-class-next',
​
        // ページネーション関連のクラスを追加
        pagination: 'splide__pagination your-class-pagination', // container
        page      : 'splide__pagination__page your-class-page', // each button
  },
});
​
splide.mount();

classesオプションで、Splide側で生成された矢印やページネーションに対して、自由にクラス名を追加できます。あとはCSS側で好きなようにスタイルを変更します。
splide__という接頭子をもったクラスはデフォルトのクラス名で、こちらは残したまま、右にyour-class-arrowsといった自分のスタイルを定義していきます。

直接HTMLを追加する方法もある

上記の方法では、デフォルトの矢印を強引にdisplay:none;などして消した後にオリジナルのスタイルを定義する必要があり、あまりスマートではありません。こんな時は、直接HTMLを与えて独自の矢印を設定することができます。

<section class="splide" aria-label="カスタマイズされた矢印の例">
　　<!-- 矢印のHTMLを追加 -->
  <div class="splide__arrows">
		<button class="splide__arrow splide__arrow--prev">
			Prev
		</button>
		<button class="splide__arrow splide__arrow--next">
			Next
		</button>
  </div>


  <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>
</section>

HTML
xxxxxxxxxx
 
<section class="splide" aria-label="カスタマイズされた矢印の例">
　　<!-- 矢印のHTMLを追加 -->
  <div class="splide__arrows">
        <button class="splide__arrow splide__arrow--prev">
            Prev
        </button>
        <button class="splide__arrow splide__arrow--next">
            Next
        </button>
  </div>
​
​
  <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>
</section>

ウィンドウ幅に応じてオプションを変更する

スマホ時とPC時でオプションの値を変更したいケースは多いと思います。breakpointsオプションを設定してレスポンシブ対応することが可能です。

var splide = new Splide('#splide', {
  perPage: 4,
  breakpoints: {
    //画面幅が640pxより小さくなった場合の処理
		640: {
			perPage: 2,
         //ここにオプションを記述していく
		},
  }
});

splide.mount();

JavaScript
xxxxxxxxxx
 
var splide = new Splide('#splide', {
  perPage: 4,
  breakpoints: {
    //画面幅が640pxより小さくなった場合の処理
        640: {
            perPage: 2,
         //ここにオプションを記述していく
        },
  }
});
​
splide.mount();

スライダーを複数設置する場合

スライダーを複数設置したい場合は、このように書きます。

document.addEventListener('DOMContentLoaded', function () {
  var slider1 = new Splide('#slider-1', {
      // オプションを記述
      type   : 'loop',
      perPage: 3,
      autoplay: true,
  });
  slider1.mount();

  var slider2 = new Splide('#slider-2', {
      // オプションを記述
      type   : 'fade',
      autoplay: true,
      perPage: 1,
  });
  slider2.mount();
});

JavaScript
xxxxxxxxxx
 
document.addEventListener('DOMContentLoaded', function () {
  var slider1 = new Splide('#slider-1', {
      // オプションを記述
      type   : 'loop',
      perPage: 3,
      autoplay: true,
  });
  slider1.mount();
​
  var slider2 = new Splide('#slider-2', {
      // オプションを記述
      type   : 'fade',
      autoplay: true,
      perPage: 1,
  });
  slider2.mount();
});
​

【注意点】iOSでautoplayが効かない原因と対策

iphoneの設定で「視差効果を減らす」をオンにしていると、その端末でautoplayが動作しません。
（設定 > アクセシビリティ > 動作 > 視差効果を減らす）

公式ドキュメントによると

ユーザの中には、アニメーションやトランジションなどの効果に対して、頭痛や吐き気を感じる人もいます（たとえば前庭運動障害を患うユーザなど）。Splideは、prefers-reduced-motion: reduceを検出した際
・speedとrewindSpeedを0で上書きます
・autoplayをpausedで上書き、再生ボタンを押さない限り自動再生が行われないように変更します

これはSplideがアクセシビリティへの意識が高いが故におこる事であり、動作しないほうがユーザーにとっては快適なのかもしれません。しかしながら、矢印やページネーションを設定していない場合、次のスライドを見る術がなくなってしまいます。こういった理由から、どうしても動かしたい場合もあるかと思います。
そんな時は、reducedMotion オプションを設定して、停止処理を書き換えることができます。

document.addEventListener('DOMContentLoaded', function () {
        var splide = new Splide('.splide', {
          type: 'loop',
          
          //(prefers-reduced-motion: reduce)を検出した際に適用されるオプションを変更できる
          reducedMotion: {
            speed: 600,
            autoplay: 'true',
          },
        });
  splide.mount();
});

JavaScript
xxxxxxxxxx
 
document.addEventListener('DOMContentLoaded', function () {
        var splide = new Splide('.splide', {
          type: 'loop',
          
          //(prefers-reduced-motion: reduce)を検出した際に適用されるオプションを変更できる
          reducedMotion: {
            speed: 600,
            autoplay: 'true',
          },
        });
  splide.mount();
});

これで「視差効果を減らす」をオンにした端末でもautoplayが動作します。