Thumbnail Carousel
サムネイルスライダー
はじめに
このチュートリアルでは、プレビュー用の小さな画像からなるスライダーをクリックすると、メインのスライダーも切り替わる、2つの同期したスライダーの作り方を解説します。
Splideのスライダーはsync()メソッドを利用することで、動作を同期させることができます。また、isNaviationオプションを有効にすると、各スライドがクリック可能になり、ナビゲーションとしてふるまうようになります。これら2つの機能を利用することで、サムネイルスライダーを作成していきます。
サムネイルスライダーの作成
まず、サムネイルスライダーからつくっていきましょう。
<section id="thumbnail-carousel" class="splide" aria-label="サムネイルスライダー。各サムネイルをクリックすると、メインのスライダーが切り替わります" > <div class="splide__track"> <ul class="splide__list"> <li class="splide__slide"> <img src="thumbnail01.jpg" alt=""> </li> <li class="splide__slide"> <img src="thumbnail02.jpg" alt=""> </li> <li class="splide__slide"> <img src="thumbnail03.jpg" alt=""> </li> </ul> </div> </section>
サムネイルスライダーは、1ページに複数のスライドをもつ必要があり、通常これはperPageオプションを利用して実現されます。ところが、ブレークポイントを用いたとしても、何枚表示させるべきかをウィンドウ幅に応じてきめていくことは、あまり現実的とはいえません。
この問題は、fixedWidthオプションを利用して、スライドの幅自体を固定すれば解決できます。
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#thumbnail-carousel', {
fixedWidth: 100,
gap : 10,
rewind : true,
pagination: false,
} ).mount();
} );
ただ、このままではスライドの幅は固定できても、中の画像自体がはみだしてしまいます。もしサムネイル画像のアスペクト比が揃っているのであれば、次のようなCSSを追加するだけですみます。
.splide__slide img {
width: 100%;
height: auto;
}
もしアスペクト比がそろっていない場合は、fixedHeightオプションでスライドの高さを固定し、CSSのobject-fitプロパティを用いて画像の大きさをそろえます（ただし、IEはこのCSSをサポートしていません）。
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#thumbnail-carousel', {
fixedWidth : 100,
fixedHeight: 60,
gap : 10,
rewind : true,
pagination : false,
} ).mount();
} );
.splide__slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
ここまでの実装で、次のようなスライダーを得ることができました。
サムネイルスライダーのとしては一見十分なように見えますが、もう少しだけ手を加える必要があります。
- どのスライドが選択されているのかわからない
- モバイル端末では
100pxだと少し大きいかもしれない - 現在選択されているスライドは、中央に表示したほうがいいかもしれない
テーマのCSSを使用している場合、現在選択されているスライドは境界線を利用して強調表示されるようになっています。splide-core.min.cssを利用している場合は、is-activeクラスを利用して、CSSでスタイリングしてください。以下にopacityを用いた例を示します。
.splide__slide {
opacity: 0.6;
}
.splide__slide.is-active {
opacity: 1;
}
また、breakpointsおよび focusオプションを使えば、次のようにして第2、第3の点を調整できます（coverを利用していないのであれば、fixedHeightは必要ありません）。
new Splide( '#thumbnail-carousel', {
fixedWidth : 100,
fixedHeight: 60,
gap : 10,
rewind : true,
pagination : false,
cover : true,
focus : 'center',
breakpoints: {
600: {
fixedWidth : 60,
fixedHeight: 44,
},
},
} ).mount();
次に、各スライドをクリック可能にするため、isNavigationをtrueに設定します。
new Splide( '#thumbnail-carousel', {
fixedWidth : 100,
fixedHeight : 60,
gap : 10,
rewind : true,
pagination : false,
cover : true,
isNavigation: true,
breakpoints : {
600: {
fixedWidth : 60,
fixedHeight: 44,
},
},
} ).mount();
これで、サムネイルスライダーは完成しました。各サムネイルをクリックして、動作を確認してみてください。
初期設定では、わずかでもマウスが移動するとドラッグとみなされ、サムネイルのクリックは無視されます。この閾値はdragMinThresholdオプションで調整できます。
メインスライダー
このチュートリアルでは、メインスライダーとして次のようなフェードスライダーを使用します。特に難しい点はありませんが、後でスクリプトから取得するため、サムネイルスライダーとは異なるID（またはクラス）を付与しておいてください。
なお、この例では矢印やページネーションを無効にしていますが、もし利用したい場合は該当するオプションを削除してください。
スライダーの同期
最後に、Splide#sync()メソッドを用いて、作成した2つのスライダーを同期させます。このメソッドは、Splide#mount()よりも前に事項する必要がある点に注意してください。
var main = new Splide( '#main-carousel', { ... } );
var thumbnails = new Splide( '#thumbnail-carousel', { ... } );
main.sync( thumbnails );
main.mount();
thumbnails.mount();
完成しました！🎊 このチュートリアルで作成したコードは以下の通りです。
document.addEventListener( 'DOMContentLoaded', function () {
var main = new Splide( '#main-carousel', {
type : 'fade',
rewind : true,
pagination: false,
arrows : false,
} );
var thumbnails = new Splide( '#thumbnail-carousel', {
fixedWidth : 100,
fixedHeight : 60,
gap : 10,
rewind : true,
pagination : false,
cover : true,
isNavigation: true,
breakpoints : {
600: {
fixedWidth : 60,
fixedHeight: 44,
},
},
} );
main.sync( thumbnails );
main.mount();
thumbnails.mount();
} );