ケケンタこんにちは！ ケケンタです。
この記事では
サムネイル型のスライドショーを簡単に作成する方法
をご紹介します。
シンプルなスライダーであれば同じくJavaScriptライブラリの「Slickスライダー」を使用することで簡単に実装できますが、サムネイル型のスライダーの実装となると話が変わってきます。
そこで今回はJavaScriptライブラリの「Splide.js」を使用する方法をご紹介していきます。
今回ご紹介するサムネイル型スライダー
サムネイル型スライダーのソースコード
早速ですが、以下が今回ご紹介するサムネイル型スライダーの完成形です。
See the Pen thumbnail slider【Splide】 by ケケンタ (@lgshifbg-the-looper) on CodePen.
実際にクリックしていただくと分かりますが、このスライダーの特徴は以下の通りです。
- メイン画像と画像リストが連動している
- 画像リストの矢印でスライドを切り替えられる
- 画像リスト上の画像をクリックすることでスライドを切り替えられる
- 最後のスライドの次は先頭に戻る
Splide.jsにはその他にも様々なオプションがあり、細かな制御が可能です。
ケケンタ例えば今回はスライドアニメーションを「フェード」にしていますが、これを別の表現に変えることも可能です。
実際に作成する際の手順
実際にこのサムネイル型スライダーを作成する手順をお伝えします。
- Splide用のCSSを読み込む
- Splide用のjsファイルを読み込む
- メイン画像用のHTMLと画像リスト用のHTMLを別々に用意する（このとき設定する画像の枚数と順番を一致させる）
- スライダーのオプションを設定するためのjsファイルを用意する
- 見た目を整えるためのCSSファイルを用意する
ケケンタ上記のポイントを抑えることで簡単にサムネイル型スライダーを作成できます！
①Splide用のCSSファイルを読み込む
headタグ内に以下のコードを記述します。
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">②Splide用のjsファイルを読み込む
続いて、bodyの終了タグ（</body>）の前に以下を記述する
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>③メイン画像用のHTMLと画像リスト用のHTMLを別々に用意する
ここがある意味もっとも重要な内容です。
具体的には、以下のような構造でHTMLを用意します。
<!-- スライダー全体のサイズを制御するためのラッパー -->
<div class="splide-wrapper">
<!-- メイン画像用のHTML -->
<div id="main-carousel" class="splide main-carousel" aria-label="サムネイルスライダー。各サムネイルをクリックすると、メインのスライダーが切り替わります">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide"><img src="画像１のパス" alt=""></li>
<li class="splide__slide"><img src="画像２のパス" alt=""></li>
<li class="splide__slide"><img src="画像３のパス" alt=""></li>
<li class="splide__slide"><img src="画像４のパス" alt=""></li>
</ul>
</div>
</div>
<!-- 画像リスト用のHTML -->
<div id="thumbnail-carousel" class="splide" aria-label="サムネイルスライダー。各サムネイルをクリックすると、メインのスライダーが切り替わります">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide"><img src="画像１のパス" alt=""></li>
<li class="splide__slide"><img src="画像２のパス" alt=""></li>
<li class="splide__slide"><img src="画像３のパス" alt=""></li>
<li class="splide__slide"><img src="画像４のパス" alt=""></li>
</ul>
</div>
</div>
</div>Splideでサムネイル型スライダーを作成する場合、理屈としては２つのスライダーを連動（同期）させることになります。
つまり、「メインスライダーの◯枚目の画像」と「画像リストの◯枚目の画像」が紐づいている状態になります。
そのため、メインスライダーと画像リストの画像の枚数・画像の並び順を一致させることが最も重要なポイントです。
④スライダーのオプションを設定するためのjsファイルを用意する
作成したスライダーのオプションを設定するためのjsファイルを用意し、それを読み込みます。
自作したjsファイル
document.addEventListener('DOMContentLoaded', function () {
// メイン画像のオプション
var main = new Splide('#main-carousel', {
type: 'fade', // スライドアニメをフェード形式にする
rewind: true, // スライドをループするかどうか
pagination: false, // ドットインジケーターを非表示
arrows: false, // 矢印を非表示
});
// 画像リストのオプション
var thumbnails = new Splide('#thumbnail-carousel', {
rewind: true, // スライドをループするかどうか
arrows: true, // 矢印を表示
pagination: false, // ドットインジケーターを非表示
isNavigation: true, // 画像クリックでスライドを切り替えられるようにする
perPage: 3, // 画像リストに表示する枚数
gap: "3%" // 画像リストの余白
});
// メイン画像と画像リストを連動させる記述
main.sync(thumbnails);
main.mount();
thumbnails.mount();
});ご覧の通り、オプションは「メイン画像」、「画像リスト」の両方にそれぞれ設定を行います。
ケケンタ２つのスライダーは元々は完全に別々のスライダーとして機能しており、それを最後の３行で連動（同期）させているという理屈です。
読み込み例
<!-- Splide用js読み込み -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<!-- 自分で用意したjsファイル -->
<script src="js/slide.js"></script>⑤ 見た目を整えるためのCSSファイルを用意する
最後に、見た目を整えるためのCSSを読み込めばサムネイル型スライダーの完成です！
今回用意したCSS
/* スライダー全体を囲うラッパー要素 */
.splide-wrapper {
width: 100%;
max-width: 250px;
margin: 0 auto;
}
.main-carousel {
/* メイン画像と画像リストの間の余白 */
margin-bottom: 30px;
}
.main-carousel .splide__track {
/* メイン画像の比率 */
aspect-ratio: 1 / 1;
}
#thumbnail-carousel .splide__slide {
/* 画像リストの画像の比率 */
aspect-ratio: 1 / 1;
}
.splide__slide {
/* 非表示中の画像は薄くする */
opacity: 0.6;
}
.splide__slide.is-active {
opacity: 1;
}
/* 画像が指定のサイズ内に収まるようにするためのCSS */
.splide__slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.splide__track--nav>.splide__list>.splide__slide.is-active {
/* 表示中の画像のボーダーを除きたいときは下記を有効化する */
/* border: none !important; */
}サムネイル型スライダー（完成形）
Splide.jsは様々な形式のスライダーを作成できるライブラリ
ケケンタ以上がSplide.jsを用いてサムネイル型スライダーを作成する方法でした。
今回はサムネイル型スライダーについてご紹介をしましたが、Splide.jsはスライダー作成をするためのライブラリで、今回の方法はどちらかと言えばその応用編です。
基本的なスライダーを始めとして、他にも色々なスライダーを作成できるライブラリなので、皆さんもぜひご活用ください。
【公式サイト】https://ja.splidejs.com/
コメント