Splide.jsは現在、人気のスライダーライブラリ『Swiper.js』の3倍のヒット数を誇るようです。
当記事ではSplide.jsを使用してシンプルなスライダーを作成する方法について記します。
目次
①必要なライブラリをCDNで読み込む
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/js/splide.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/css/splide.min.css" rel="stylesheet">
ここでは現時点で最新版のver4を使用しています(2024年2月時点)。
Splide.jsの最新バージョンは常にこちらで確認できます。
https://www.jsdelivr.com/package/npm/@splidejs/splide?path=dist
②HTMLで必要なパーツを用意する
<div class="splide sample-slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide"><img src="./img/sample1.png"></li>
<li class="splide__slide"><img src="./img/sample2.png"></li>
<li class="splide__slide"><img src="./img/sample3.png"></li>
</ul>
</div>
</div>・splide
・splide__track
・splide__list
・splide__slide
③Javascriptでスライダーを生成する
第二引数にはオプションを指定できますが、一旦ここでは空にしております。
new Splide('.sample-slider', {
}).mount()
まだ、見た目は崩れていますがスライダーができました。
Splide.jsでは矢印とページネーション（ドット）がデフォルトで表示されるようです。
④CSSでスタイルを整える
CSSでスライダーの横幅を調整しましょう。
横幅をパーセントで指定しておくとウィンドウ幅にあわせてスライダーのサイズが自動調整されるので便利です。
.sample-slider {
width: 70%;
margin: 0 auto;
}
.sample-slider img {
width: 100%;
}
シンプルなスライダーができました。
⑤矢印やページネーションを消す（非表示にする）
Splide.jsではデフォルトで矢印とページネーション（ドット）が表示されますが、それらが必要ない時もあると思います。
そんな時は第二引数のオプションで、簡単に矢印やページネーションを非表示にすることができます。
new Splide('.sample-slider', {
arrows: false, // 追加（矢印を非表示にする）
pagination: false, // 追加（ページネーションを非表示にする）
}).mount()
矢印とページネーションが非表示になりました。
⑥スライダーをループさせる
よく使われるオプションの一つとしてループオプションがあります。
ループさせると最後のスライドの続きに最初のスライドが再び来るようになります。
type : ‘loop’をオプションに追加します。
new Splide('.sample-slider', {
type : 'loop', // 追加
}).mount()
スライダーがループするようになりました。
⑦スライダーを自動再生する
よく使われるオプションとしてもう一つ自動再生オプションがあります。
autoplay: trueを追加する事でスライダーを自動再生させることができます。
intervalオプションで自動再生の間隔を指定できます（指定しない場合は5000=5秒になります）。
new Splide('.sample-slider', {
type : 'loop',
autoplay: true, // 追加（自動再生）
interval: 1500, // 追加（自動再生の間隔）
}).mount()
スライダーが自動再生になりました。
1.5秒に一度スライドが自動で切り替わると思います。
Splide.jsのAutoplayオプションは自動再生するだけでなく、プログレスバーを表示したり、特定のスライドだけ長く表示させたり、機能が豊富なので、より詳しく学びたい方は下記をご参照ください。
Splide.jsのAutoplayオプションを使い倒す
ソースコード全文
最後にソースコード全文を載せておきます。
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/js/splide.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/css/splide.min.css" rel="stylesheet">
<style>
.sample-slider {
width: 70%;
margin: 0 auto;
}
.sample-slider img {
width: 100%;
}
</style>
<div class="splide sample-slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide"><img src="./img/sample1.png"></li>
<li class="splide__slide"><img src="./img/sample2.png"></li>
<li class="splide__slide"><img src="./img/sample3.png"></li>
</ul>
</div>
</div>
<script>
new Splide('.sample-slider', {
arrows: false, // 矢印を非表示にする
pagination: false, // ページネーションを非表示にする
type : 'loop', // ループさせる
autoplay: true, // 自動再生させる
interval: 1500, // 自動再生の間隔
}).mount()
</script>以上、Splide.jsでシンプルなスライダーを実装する方法でした。
今回は基本的なスライダーの作成方法についてのみ解説しましたが、スライダーは大抵サイトによってデザインが様々だと思います。その中でも矢印やページネーション（ドット）が独自のデザインの場合が多い印象があります。
下記の記事ではSplide.jsで作成したスライダーの矢印やページネーションをカスタマイズする方法について記しているので、興味のある方はぜひご参照ください。
Splideスライダーの矢印をカスタマイズする
Splideスライダーのページネーションをカスタマイズする
