目次
Splideとは
Splideは簡単にスライダー(カルーセル)を作成できるJavaScriptライブラリ。
すでにスライダーのJavaScriptライブラリはほかにもあるが、Splideは使用方法が簡単で初心者にもわかりやすいのでオススメ。
npmからもインストール可能でVueやReactに対応している点も使い勝手が良い。
Splide - Free, lightweight and powerful JavaScript slider
Splideによるスライダー作成方法
まず最初に以下のようなHTMLを用意します。
<div class="splide-outer">
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="https://placehold.jp/ccffff/000000/960x540.png?text=Slide1">
</li>
<li class="splide__slide">
<img src="https://placehold.jp/ffccff/000000/960x540.png?text=Slide2">
</li>
<li class="splide__slide">
<img src="https://placehold.jp/ccffcc/000000/960x540.png?text=Slide3">
</li>
</ul>
</div>
</div>
</div>
.splide-outerは公式が指定しているclass名ではなく私のほうで追加したもの。
.splide-outerにはmax-widthでスライダーの最大幅(画像の横幅)を入れる。
今回作成するサンプルでは以下のように指定する。
html, body {
margin: 0;
padding: 0;
}
.splide-outer {
max-width: 960px;
margin: auto;
}
.splide__slide img {
width: 100%;
}
次にhead内にSpideのCSSとJavaScriptを読み込み、DOMContentLoaded後に実行する処理を追加すれば完成だ。(3分もかからず作れた)
スライダーは最後の位置で右ボタンをクリックすると最初に戻る「ループ」になっていることがほとんどなので、サンプルには「type: 'loop'」の設定を入れてあります。
<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>
<script>
document.addEventListener('DOMContentLoaded', () => {
new Splide('.splide', {
type: 'loop',
}).mount()
})
</script>
スマートフォンのスワイプやキーボードの左右キーでの操作などはデフォルトで入っているので、とにかく簡単に作れる。
Splideの画像をpictureタグにする
前述のサンプルでは説明を簡略化させるためimgタグだけ入っている。
パソコンとスマートフォンの画像サイズの差が大きい場合はpictureタグを使用して出し分けたほうが良いだろう。
<li class="splide__slide">
<picture>
<source media="(min-width: 768px)" srcset="https://placehold.jp/ccffff/000000/960x540.png?text=Slide1_PC">
<img src="https://placehold.jp/ccffff/000000/960x540.png?text=Slide1_SP">
</picture>
</li>
Splideの画像の左右に余白を追加
Splideの.splide内の左右に余白を追加するにはSplideのオプションにpaddingを指定する。
document.addEventListener('DOMContentLoaded', () => {
new Splide('.splide', {
type: 'loop',
padding: {
right: '5rem',
left : '5rem',
},
}).mount()
})
ここでの余白はあくまで.splide内の左右の余白なので、スライドのliタグ間の余白が必要であれば.splide__slideの左右にCSSでpaddingが必要。
.splide__slide {
padding: 0 1rem;
}
一画面に複数表示
スライダーの画像が多い場合、1画面に1つではなく3つのように複数表示させたいことがある。
その場合はオプションで「perPage: 3」を追加する。
document.addEventListener('DOMContentLoaded', () => {
new Splide('.splide', {
type: 'loop',
perPage: 3,
}).mount()
})
複数表示されていても移動は1つずつ
1画面に例えば3つ表示されている場合は3つずつ移動させたほうがユーザービリティ上は良いとされているが、クライアントの要望などから1つずつ移動させなければならないこともある。
その場合は「perMove: 1」を指定すれば1つずつ動かせるようになる。
複数表示の最初は中央に表示
デフォルトだと「perPage: 3」の場合は「1 2 3」と表示されるが「9 1 2」のように最初は中央に表示したいことがある。
その場合は「focus : 'center'」を指定する。
自動再生させる
自動再生させるには「autoplay: true」を追記する。
デフォルトは5000ミリ秒で切り替えで「interval: 2000」のように指定すれば切り替え秒数を変更できる。
横から縦方向にする
「direction: 'ttb'」とheightを指定すれば横から縦方向に変更できる。
ちなみにttbは「Top to bottom」の略。
矢印ボタンの位置を変更
矢印ボタンの位置はCSSで以下の2つのclassを変える。
(矢印ボタンを内側ではなく外側に配置する例)
.splide__arrow--prev {
left: -3em;
}
.splide__arrow--next {
right: -3em;
}
矢印ボタンを別のものに変える
矢印ボタンはデフォルトだと丸に < > が付いたダサいデザインとなっている。
変えたい場合はまずHTMLのclass="splide"直下にclass="splide__arrows"のHTMLを追加する。
<div class="splide__arrows">
<button class="splide__arrow splide__arrow--prev"></button>
<button class="splide__arrow splide__arrow--next"></button>
</div>
class="splide__arrows"がHTML内にあると自分で矢印画像を入れると判定されるのでSVGの < > 画像は入らなくなる。
あとは.splide__arrow--nextおよび.splide__arrow--prevにCSSで矢印を指定するだけだ。
例えば赤い三角にしたい場合はCSSで以下のように指定する。
画像に変えたい場合はbackground: url で指定する
ページネーションを非表示
pagination: false でページネーションを非表示にできる。
Splideによるスライダーのサンプル(pagination)
フェードで切り替える
type: 'fade' でフェード切り替えにできる。
特定のindexから開始
1番目からではなく2番目から開始したい場合はstart: 1でindexを指定する。
startの部分を変数にすれば曜日別に最初に表示するスライドを変えたりできる。
Splideによるスライダーのサンプル(start change)
モーダルに使用する場合はstartか次のURL Hashを使用すると良いだろう。
URL Hashを追加
スライダーをURLハッシュ対応にする。
URL Hashの機能を使用するにはsplide-extension-url-hash.min.jsを別途読み込んでおく必要がある。
mount(window.splide.Extensions)と引数のセットも忘れずに。
ハッシュはsplide__slideにdata-splide-hash属性を付けて以下のようにする。
<ul class="splide__list">
<li class="splide__slide" data-splide-hash="slide01">
<img src="https://placehold.jp/ccffff/000000/960x540.png?text=Slide1">
</li>
<li class="splide__slide" data-splide-hash="slide02">
<img src="https://placehold.jp/ffccff/000000/960x540.png?text=Slide2">
</li>
<li class="splide__slide" data-splide-hash="slide03">
<img src="https://placehold.jp/ccffcc/000000/960x540.png?text=Slide3">
</li>
</ul>
https://iwb.jp/s/javascript-library-splide-slider-and-carousel/hash.html#slide02
