WEB上で見れるスライドショーを自前で実装するのはとても大変だったので、何かライブラリーを使うことになりました。
調べるとJavaScriptライブラリであるSplideが軽くて使いやすかったのでご紹介したいと思います。
Splideとは
Splideはアクセシビリティに柔軟性に配慮した軽量・高機能スライダーが実装できるJavaScriptライブラリーです。
オプションを変更するだけで、複数枚表示、サムネイル表示、縦方向に移動するスライダーなど様々なスライダーを簡単に作成することができます。
ライブラリを読み込ませる
使うためにはライブラリを読み込ませる必要があるのですが、方法が3つあるのでご紹介します。
npmインストール
npm install @splidejs/splideホスティング（ファイルダウンロード）
GitHubからファイルをダウンロードしてscriptタグで読み込ませてください。
<script src="splide.min.js"></script>CDNの利用
既にあるCDNから参照します。この記事ではCDNで使います。
<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">スライダーを実装する
HTMLファイル
先ほど紹介したCDNとスライドさせる要素を作ります。この段階では何も表示されません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<title>Splide</title>
</head>
<body>
<div class="splide" aria-label="splide-label">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">1画面</li>
<li class="splide__slide">2画面</li>
<li class="splide__slide">3画面</li>
</ul>
</div>
</div>
</body>
</html>JavaScriptを読み込ませる
new Splide('.splide').mount();
たった1行で動きます。本当にこれだけいいのか…？と思ってしまいました。
CSSで整える
ただ見た目がおかしいのでCSSで整えます。
.splide {
width: 100%;
height: 200px;
}
.splide__slide {
display: flex;
align-items: center;
justify-content: center;
background-color: silver;
}完成したデモ
完成したデモです。スマホでのスワイプ対応ですごくよいです。
まとめ
これでいいのかと疑ってしまうぐらい簡単に実装することができました。
自動スクロールやギャラリー表示など様々カスタマイズをすることができるので、ぜひドキュメントを見てみてください。