・Splideってどうやって使うの？
こんな疑問にお答えします。
「Splide」とはスライダーが作れるJavaScriptライブラリのこと。
他のスライダーのライブラリに比べて、軽量なのが特徴です。またjQueryを使いません。
簡単に実装可能なのでとても便利！
すぐにできるよ！
ということで、この記事では「Splideの使い方」について解説していきます！
・Splideのメリット｜デメリット
・Splideの使い方【準備編】
・Splideの使い方【実行編】
・Splideの使い方【オプション】
目次
【解説】Splideのメリット｜デメリット
Splideを使う前にメリット・デメリットを知っておくべし。
・軽量
・高速
・jQueryを使わない
・公式ドキュメントが日本語
・複雑なアニメーションが実装可能
・slickやswiperと比べると情報量少なめ
【解説】Splideの使い方【準備編】
「Splide」を使うために、まずは下記の準備をしていきましょう。
①：ファイルをダウンロード
②：必要なファイルのみ読み込む
※：CDNを使う場合
順に解説していきます。
まずは「Splide」を使うためのファイルをダウンロードしていきます。
下記画像の赤枠「Code」⇒「Download ZIP」からファイルをダウンロードしましょう。
Zipを解凍すると色々ファイルがでてきますが、使うのは下記赤枠の２つのみ。
dist/css/splide.min.css
dist/js/splide.min.js下記のようにHTMLにて読み込みタグを記述します。
<!-- css -->
<link rel="stylesheet" href="./splide/splide.min.css">
<!-- js -->
<script type="text/javascript" src="./splide/splide.min.js"></script>
<!-- 実行用の処理をsplide.min.jsより後に読み込む -->
<script type="text/javascript" src="./script.js"></script>これで準備完了だよ！
実はCDNにてライブラリを読み込む方法もあります。
それがこちら↓
<!-- css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
<!-- js -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
【解説】Splideの使い方【実行編】
続いてSplideを実行していく使い方を紹介していきます。
まずデモがこちら↓
See the Pen splide 基本的な使い方① by jito-coder (@jito-coder) on CodePen.
01の要素を左右にスワイプすれば、スライドされるかと思います。
<div class="wrapper">
<div class="splide" aria-label="Splideの基本的なHTML">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide splide__slide01">01</li>
<li class="splide__slide splide__slide02">02</li>
<li class="splide__slide splide__slide03">03</li>
</ul>
</div>
</div>
</div>.splide__slide {
font-size: 50px;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 350px;
}
.splide__slide01 {
background-color: orange;
}
.splide__slide02 {
background-color: pink;
}
.splide__slide03 {
background-color: skyblue;
}new Splide( '.splide' ).mount()コードの組み立てとして重要な点がこちら↓
- 必須クラスを使いHTMLを組み立てる
- CSSで幅や色などを調整
- javascriptでイベントを実行
順に解説していきます。
まず必須クラスを使いHTMLを組み立てましょう。
ぶっちゃけ、ここが一番重要なポイントです。
<!-- スライダー全体を囲む親要素 -->
<div class="splide" aria-label="Splideの基本的なHTMLの例">
<!-- スライダー要素を囲む親要素 -->
<div class="splide__track">
<!-- 各スライドを囲む要素 -->
<ul class="splide__list">
<!-- 各スライド -->
<li class="splide__slide splide__slide01">01</li>
<li class="splide__slide splide__slide02">02</li>
<li class="splide__slide splide__slide03">03</li>
</ul>
</div>
</div>| クラス名 | 内容 |
|---|---|
| splide | スライダー全体を囲む親要素 |
| splide__track | スライダー要素を囲む親要素 |
| splide__list | 各スライドを囲む要素 |
| splide__slide | 各スライド |
上記表で使われているクラス名＋位置をそのまま使用しましょう。
クラス名を変えるとうまく動かなくなる恐れがあります。
ただdivタグをulタグに変える等の対応は問題ありません。（splide__slide01、02は装飾用に加えております）
ちなみにスライダーがメインコンテンツと関係ない場合（装飾やasideタグを使うなど）、role=”group”を記述します。
<div class="splide" role="group" aria-label="Splideの基本的なHTMLの例">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide splide__slide01">01</li>
<li class="splide__slide splide__slide02">02</li>
<li class="splide__slide splide__slide03">03</li>
</ul>
</div>
</div>Splideはアクセシビリティを意識されているため、適切なラベルをつけます。
先述した例だと「aria-label」ですね。
ただ下記のように目に見える形で見出しがある場合は、「aria-labelledby」を使って関連付けましょう。
<div class="splide" role="group" aria-labelledby="carousel-heading">
<h2 id="carousel-heading">Splideの基本的なHTML</h2>
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide splide__slide01">01</li>
<li class="splide__slide splide__slide02">02</li>
<li class="splide__slide splide__slide03">03</li>
</ul>
</div>
</div>Splideは下記のHTML構成の制限があります。
- 「splide__track」の直下の子要素は「splide__list」にする
- 「splide__list」の直下の子要素は「splide__slide」にする
CSSにて見た目を調整してカスタマイズしていく感じです。
今回は例として下記を指定しました。
.splide__slide {
font-size: 50px;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 350px;
}
.splide__slide01 {
background-color: orange;
}
.splide__slide02 {
background-color: pink;
}
.splide__slide03 {
background-color: skyblue;
}あとはJavaScriptにてイベント実行の記述をするだけ。
書き方は下記になります。
new Splide( '.splide' ).mount()これでSplideによるスライド実装が完成しました！
【解説】Splideの使い方【オプション・カスタマイズ】
Splideにはオプションがあり、値をつけることでカスタマイズが可能です。
ということで最後にそちらを紹介します。
オプションの指定は下記の感じ↓
new Splide(".splide", {
// ここにオプションを書いていく
}).mount();new Splide(".splide", {
オプション1: 値,
オプション2: 値,
}).mount();new Splide(".splide", {
type: 'loop',
speed: 500,
}).mount();Splideのオプションに関しては「公式サイト」にて詳しく説明されています。
その中でも良く使いそうなのが下記ですね↓
| type | スライドの動作を指定 （ループ、フェード等） |
| rewind | スライドを巻き戻す |
| perPage | スライドの表示数を指定 |
| gap | スライド同士の遷移距離 |
| speed | スライドの遷移スピード |
| autoplay | スライドの自動再生の可否 |
【簡単】Splideの使い方｜初心者向けに解説【オプション】
- jQueryを使わない
- 「splide.min.js」を使う
- 「splide.min.css」を使う
- 必須クラス、指定位置を合わして組立てる
- JavaScriptでイベント実装。オプションを使うことでカスタマイズ可能。
「Splide」は便利なので使い方を覚えておこう！
