MENU
初心者、未経験でもわかりやすいWebフロントエンド技術の解説ブログです。
  1. ホーム
  2. プログラミング
  3. HTML&CSS
  4. 【JSスライダー】Splideの使い方を解説【サンプルあり】

【JSスライダー】Splideの使い方を解説【サンプルあり】

プログラミング HTML&CSS JavaScript

スライダーのJavaScriptライブラリとしては、Swiperやslickなどが有名どころでしたが、

最近Splideというスライダーがかなり優れていると知ったので今回はそちらを紹介していきます。

例によってサンプルコードも使いながら、わかりやすく解説していきます！

この記事は執筆当時の最新バージョンver4.1.4で解説しています。

目次

Splideとは？

アクセシビリティに配慮した軽量・高機能のスライダーライブラリです。

ほかのライブラリに依存せず、Lighthouseのエラーもないというのも強みのひとつのようです。

公式サイトはこちら↓

https://ja.splidejs.com/

Splideの特徴は以下のような感じです。

・ドキュメントが日本語でわかりやすい
・容量が超軽い
・アクセシビリティに配慮した設計になっている
・操作感が良い
・かなり人気が高まっている
・remなどの単位に対応している

日本語でドキュメントが作られているので、日本人にとってはかなり読みやすく使いやすいですね。

また、他のライブラリに比べて容量が非常に軽量であることも大きなメリットです。

最近はかなり重要視されているアクセシリビリティへの力の入れ方もすごいので、よければ公式をご参照ください。

Splideのサンプル

まずはSplideを使用して簡単なスライダーを作ってみたので、

こんなのが作れるよということでサンプルをご覧ください。

See the Pen splide by WEB-DEN (@Yukiwebcreate) on CodePen.

※PC推奨

良い感じのスライダー

Splideの使い方-導入編

では早速導入方法を解説します。

Splideのインストール方法は大きく分けて３つあります。

  1. NPMでインストール
  2. CDNで利用
  3. ファイルをダウンロードして利用

です。この記事ではCDNを利用する場合で解説していきます。

なお、ファイルダウンロードの場合は公式GitHubからソースコードを一式ダウンロード可能です。

公式GitHubはこちら (「Code」を押して→「Download ZIP」でダウンロード可能です)

Splideの導入方法 01 – HTMLの準備とCDNの利用

まずはSplideを使用するために必要な最低限のHTMLを用意します。

<section class="splide" aria-label="基本構造の例">
  <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>

続いてCDNサービスのjsdelivrのページから、必要なjsファイルとCSSを呼んできます。

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

自分でスタイリングする場合はここから自前でCSSを書いていくことも可能ですが、

ある程度スタイリングされたCSSのテンプレが公式から提供されているので

そちらを使用する場合は下記のコードも読み込んでおくようにするといいでしょう。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/themes/splide-default.min.css">
<!-- 下記は色のパターンによっていずれかひとつを読み込んでください -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/themes/splide-sea-green.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/themes/splide-skyblue.min.css">

npmでインストールする場合

下記のコマンドでインストールしてください。公式としては最新版の利用を推奨されています。

$ npm install @splidejs/splide

Splideの導入方法 02 – JavaScriptでの初期化

CDNの読込とHTMLの準備ができたら、下記のJSコードでSplideを初期化します。

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

この時点でスライダーとしては動作するはずです。

splide.mount(); を正しく実行しないと画面に何も表示されないので注意

Splideの使い方-カスタマイズ編

Splideには様々なオプション値があり、JSの中でそれらを設定することでスライダーをカスタマイズできます。

いくつかピックアップさせていただくと

スライドの左右に余白を付ける場合

var splide = new Splide( '.splide', {
  type   : 'loop',
  padding: '5rem',
} );

splide.mount();

複数スライドを表示する場合

var splide = new Splide( '.splide', {
  perPage: 3,
  rewind : true,
} );

splide.mount();

1スライドずつ移動

var splide = new Splide( '.splide', {
  type   : 'loop',
  perPage: 3,
  perMove: 1,
} );

splide.mount();

フリードラッグ（スナップ）※思いっきりドラッグしたらビュンビュンいくやつ

var splide = new Splide( '.splide', {
  type   : 'loop',
  drag   : 'free',
  snap   : true,
  perPage: 3,
} );

splide.mount();

などなど、色々あり好みの設定値を定めることでスライダーをカスタマイズできます。

冒頭で紹介したサンプルコードでは、スライドの左右に余白をつけるオプションを使用しました。

これらのオプション値の設定が終われば、一旦スライダーは完成です。

あとは任意でHTMLの追加マークアップや、CSSのスタイリングを行いましょう。

補足①マークアップで気を付けること

HTMLのマークアップで気を付けてほしいことは、Splideを構成する要素についてです。

下記のHTMLの通り、主には、 .splide  .splide__track  .splide__list  .splide__slide の４つがSplideの主要な要素ですが、基本的にはこれらの階層構造が崩れると正しく動作しなくなることがあります。

<section class="splide" aria-label="基本構造の例">
  <div class="splide__track">
    <ul class="splide__list"> <!-- splide__trackの直下でないといけない -->
      <li class="splide__slide">Slide 01</li> <!-- splide__listの直下でないといけない -->
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
    </ul>
  </div>
</section>

コード内にコメントも入れましたが、splide__listはsplide__trackの直下の子要素でなければいけないなど制約があります。

基本的な構造は下手にいじらない方が安全でしょう。また、splideを使う要素にはaria-labelでラベルをつける必要があります。

これはSplideが力を入れているアクセシリビリティの観点からも重要なことなので、必ず入れておきましょう。

基本的な構造についてもっと詳しく知りたい方は公式のドキュメントをご参照ください。

補足②複数のスライダーを作成したいとき

同じページに複数のスライダーを使用したいときは、

それぞれのインスタンスを作成すればOKです。

new Splide( '#slider1' ).mount();

new Splide( '#slider2' ).mount();

new Splide( '#slider3' ).mount();

もしくは以下のようにまとめて初期化することも可能です。

var elms = document.getElementsByClassName( 'splide' );

for ( var i = 0; i < elms.length; i++ ) {
  new Splide( elms[ i ] ).mount();
}

補足③スマホサイズで切替える、ブレイクポイントの設定

このSplide、ブレイクポイントの設定がかなり簡単です。

Web制作などの現場では

スライダーは、PCで３枚ずつ表示、スマホでは１枚ずつ表示で！

などというオーダーがよくあります。

さいごにそのような実装はSplideならこんな風にできますよ、というサンプルを紹介して終わりにしようと思います。

動くサンプル

See the Pen splide02 by WEB-DEN (@Yukiwebcreate) on CodePen.

ポイントはbreakpoints

上記のサンプルでは、JSコードは以下のようになっています。

document.addEventListener("DOMContentLoaded", function () {
  const options = {
    perPage: 3,
    type: "loop",
    rewind: true,
    breakpoints: {
      767: {
        rewind: true,
        perPage: 1,
        padding: "5rem"
      }
    }
  };
  const splide = new Splide(".splide", options);
  splide.mount();
});

レスポンシブ対応として、breakpointsを767pxに設定し、それ以下の場合は１枚ずつのスライドで左右に余白ができるようにしています。

option項目が増えて多いので、optionsというオブジェクトにまとめています。

このあたりは実際の業務でも頻繁に使えそうなので是非試してみてください！

使いやすそうなスライダーでいいね！

本を何冊も買いたくない人におすすめ

プログラミング HTML&CSS JavaScript
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

目次