ウェブサイトに動きを加えるために、スライダーやカルーセルは欠かせない要素です。
特に、画像やコンテンツを効果的に見せるためのツールとして多くのサイトで利用されています。
そこで今回は、軽量で柔軟なスライダー・カルーセルライブラリである Splide.js の使い方を紹介します。
Splide.js は、シンプルな API と豊富なカスタマイズオプションを備えており、初心者から上級者まで幅広く利用できるライブラリです。
レメディオ日本人が開発されているということで、日本語ドキュメントなのが非常に嬉しいですね。
このガイドでは、基本的なインストール方法から高度な機能の活用方法まで、Splide.js を使いこなすためのステップを詳しく解説します。あなたのウェブサイトを一段と魅力的にするために、ぜひ参考にしてください。
- iPadやガジェットの情報を発信。（2020年からブログ運営開始）
- 実務で使えるフロント周りのweb制作技術を発信。
- レメプラで、デジタルプランナーも作っています。
Splide.js とは？
Splide.js は、軽量でアクセシビリティに配慮した軽量・高機能スライダー。
シンプルな API と豊富なカスタマイズオプションを備えており、初心者から上級者まで幅広く利用できます。レスポンシブデザインに対応しており、モバイルデバイスでも美しいスライダーを実現できます。
- 開発にTypeScriptを採用
- 他のライブラリに非依存
- 29kB（gzipで12kB）と軽量
- 柔軟性と拡張性
- 400を超えるテストケースによるライブラリの保護
- 複数スライドに対応
- CSSでのスライドまたはフェード遷移
- Breakpointによるレスポンシブ対応
- %やremなどの相対単位に対応
- 異なるサイズの画像を自動でクロップ可能
- プログレスバーや再生・停止ボタンを持った自動再生に対応
- 右から左、上から下への方向に対応
- マウスまたはスワイプによるドラッグ操作に対応
- 位置を固定しないフリードラッグモード
- マウスホイールによるスライドの遷移
- ネストしたスライダーに対応
- 遅延読み込み（Lazy Load）に対応
- サムネイルスライダー
- それぞれサイズが異なるスライドに対応
- 優れたアクセシビリティ
- ライブリージョンを標準搭載
- Internet Explorer 10での動作
レメディオslick, swiperと違って、日本語ドキュメントなのは嬉しいですよね。また、アクセシビリティにも優れたスライダープラグインなので、これからの時代にあったスライダーを作成できます！
Splide.js のインストール方法
CDN を利用する
CDN を利用することで、簡単に Splide.js を導入できます。以下のコードを HTML ファイルの<head>タグ内に追加します。
<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>npm を利用する
npm を利用して Splide.js をインストールする場合は、以下のコマンドを実行します。
npm install @splidejs/splideその後、JavaScript ファイル内で Splide.js をインポートします。
import Splide from '@splidejs/splide';
import '@splidejs/splide/dist/css/splide.min.css';基本的なスライダーの作成
splide.jsを図式化するとこのようになりますので、公式ドキュメントと見比べながら、構造を確認してもらえばと思います。
HTML の準備
まず、スライダーの HTML 構造を作成します。
<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 の設定
document.addEventListener('DOMContentLoaded', function () {
new Splide('#splide').mount();
});CSS の適用
デフォルトのスタイルを適用するために、先ほどの CDN リンクまたはインポートを利用します。
Splide.jsのv4以降の基本ルール
v4以降では、以下のルールを守れば、自由にdivなどを置いても問題ありません。
trackとlist要素には、任意の要素を追加できないlistはtrackの、slideはlistの子要素でなければならない
OKな例
<section class="splide" aria-label="HTMLの制限の例">
<div>
<div>
<div>
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">...</li>
</ul>
</div>
</div>
</div>
</div>
</section>NGな例
<section class="splide" aria-label="無効なHTMLの例">
<div class="splide__track">
<div>
<ul class="splide__list">
<li class="splide__slide">...</li>
</ul>
</div>
</div>
</section>スライドの中に.splide__slide__containerクラスを持った要素があると、height、heightRatio、あるいはfixedHeightを、スライドではなくコンテナに対して適用するようになります。
<section class="splide" aria-label="スライドコンテナの例">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<div class="splide__slide__container">
<img src="...">
</div>
Lorem Ipsum Dolor Sit Amet
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="...">
</div>
Lorem Ipsum Dolor Sit Amet
</li>
</ul>
</div>
</section>Splide.js のオプション設定
Splide.jsもslick.js, swiper.jsと同様にオプション設定がたくさんあります。
今回は、その中でも実務でよく使うオプションを紹介していきます。
オプションの変更方法
new Splide( '.splide', {ここにオプション設定});
new Splide( '.splide', {
type : 'loop',
perPage: 3,
} );よく使うオプション設定
| オプション名 | 設定項目 | 内容 |
|---|---|---|
| type | slide, loop, fade | スライダーの種類 |
| speed | number（例：400） | スライダーの移動時間（ミリ秒単位） |
| width | number（例：80%, 100rem） | スライダーの最大幅（相対単位も可能） |
| perPage | number（例：1） | 1ページに何枚のスライドを表示するか |
| perMove | number（例：1） | 1度の移動で、何枚のスライドを移動するか |
| gap | number（例：1rem） | スライド間の余白。（相対単位も可能） |
| padding | number（例：{left: 10, right: 20}） | 水平スライダーの左右、あるいは垂直スライダーの上下の余白（Padding）を指定 |
| arrows | boolean（例：true） | 矢印ボタンを表示するかどうか |
| pagination | boolean（例：true） | ページネーションを表示するかどうか |
| autoplay | boolean（例：false） | 自動再生を有効にするかどうか |
| direction | ltr, rtl, ttb | スライダーの方向 |
| mediaQuery | min, max | イントの検出に用いられるメディアクエリに対して、min-width、max-widthのどちらを使うかを指定 |
| breakpoints | Record<string | number, ResponsiveOptions> | それぞれのブレークポイントに対するレスポンシブオプションの集合 |
オプション設定の詳細については、以下のリンクを参考にしてください。
カスタムスタイルの適用
スライダーのデザインをカスタマイズして、見た目を整えてみましょう！
矢印のカスタマイズ
arrowPathを使って、矢印アイコンを書き換えることができます！
具体的に入れる内容は、pathの中のd=""の中身を入れましょう。
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M31 19.5L14.5 36.3875L14.5 2.6125L31 19.5Z" fill="#9BC187"/>
</svg>ページネーションのカスタマイズ
ページネーションの挿入する位置を変える
挿入する位置を変えたいときは、プレースホルダ（<ul class="splide__pagination"></ul>）を使用しましょう。
<section class="splide" aria-label="プレースホルダの例">
<ul class="splide__pagination"></ul>
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">...</li>
</ul>
</div>
<!-- 指定しない場合はここに挿入される -->
</section>ページネーションにページ番号を入れる
ページ番号を入れる場合は、以下のようにCSSでカスタマイズするのが簡単です。
.splide__pagination {
counter-reset: pagination-num;
}
.splide__pagination__page:before {
counter-increment: pagination-num;
content: counter( pagination-num );
}まとめ：Splide.jsを使いこなして、Webサイトをもっと魅力的に。
Splide.js を使えば、シンプルでありながら強力なスライダー・カルーセルを簡単に実装することができます。
この記事では、基本的なインストール方法から、スライダーのオプション設定、カスタマイズまでを詳しく紹介しました。
Splide.js の豊富なオプション設定やカスタムスタイルの適用方法を理解することで、あなたのウェブサイトに動きと魅力を加えることができるでしょう。
レメディオぜひこの記事を参考にして、Splide.js を活用した素晴らしいスライダーを作成してみてください。
基本的なスライダーの機能は紹介しましたので、別の記事で、応用的なスライダーの機能面も紹介していきます！次回もお楽しみに！
