Thumbnail Slider

サムネイルスライダー

v3用のドキュメントを参照しています

はじめに

このチュートリアルでは、プレビュー用の小さな画像からなるスライダーをクリックすると、メインのスライダーも切り替わる、2つの同期したスライダーの作り方を解説します。

Splideのスライダーはsync()メソッドを利用することで、動作を同期させることができます。また、isNaviationオプションを有効にすると、各スライドがクリック可能になり、ナビゲーションとしてふるまうようになります。これら2つの機能を利用することで、サムネイルスライダーを作成していきます。

サムネイルスライダーの作成

まず、サムネイルスライダーからつくっていきましょう。

<div id="thumbnail-slider" class="splide">
 <div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="thumbnail01.jpg">
</li>
<li class="splide__slide">
<img src="thumbnail02.jpg">
</li>
<li class="splide__slide">
<img src="thumbnail03.jpg">
</li>
</ul>
 </div>
</div>
HTML

<div id="thumbnail-slider" class="splide"> <div class="splide__track">	<ul class="splide__list">	<li class="splide__slide">	<img src="thumbnail01.jpg">	</li>	<li class="splide__slide">	<img src="thumbnail02.jpg">	</li>	<li class="splide__slide">	<img src="thumbnail03.jpg">	</li>	</ul> </div> </div>

サムネイルスライダーは、1ページに複数のスライドをもつ必要があり、通常これはperPageオプションを利用して実現されます。ところが、ブレークポイントを用いたとしても、何枚表示させるべきかをウィンドウ幅に応じてきめていくことは、あまり現実的とはいえません。

この問題は、fixedWidthオプションを利用して、スライドの幅自体を固定すれば解決できます。

document.addEventListener( 'DOMContentLoaded', function () {
 new Splide( '#thumbnail-slider', {
fixedWidth: 100,
gap : 10,
rewind : true,
pagination: false,
 } ).mount();
} );
JavaScript

document.addEventListener( 'DOMContentLoaded', function () { new Splide( '#thumbnail-slider', {	fixedWidth: 100,	gap : 10,	rewind : true,	pagination: false, } ).mount(); } );

ただ、このままではスライドの幅は固定できても、中の画像自体がはみだしてしまうため、前回のチュートリアルで登場したcoverオプションをつかうか、あるいはCSSで画像の幅を設定するかのいずれかの方法で対処します。

もしサムネイル画像のアスペクト比が揃っているのであれば、次のようなCSSを追加するだけですみます。

.splide__slide img {
 width: 100%;
 height: auto;
}
CSS

.splide__slide img { width: 100%; height: auto; }

もしそうでないならば、coverオプション、およびfixedHeightを用いて画像の大きさをそろえます。

document.addEventListener( 'DOMContentLoaded', function () {
 new Splide( '#thumbnail-slider', {
fixedWidth : 100,
 fixedHeight: 60,
gap : 10,
rewind : true,
pagination : false,
 cover : true,
 } ).mount();
} );
JavaScript

document.addEventListener( 'DOMContentLoaded', function () { new Splide( '#thumbnail-slider', {	fixedWidth : 100, fixedHeight: 60,	gap : 10,	rewind : true,	pagination : false, cover : true, } ).mount(); } );

ここまでの実装で、次のようなスライダーを得ることができました。

サムネイルスライダーのとしては一見十分なように見えますが、もう少しだけ手を加える必要があります。

どのスライドが選択されているのかわからない
モバイル端末では100pxだと少し大きいかもしれない
現在選択されているスライドは、中央に表示したほうがいいかもしれない

テーマのCSSを使用している場合、現在選択されているスライドは境界線を利用して強調表示されるようになっています。splide-core.min.cssを利用している場合は、is-activeクラスを利用して、CSSでスタイリングしてください。以下にopacityを用いた例を示します。

.splide__slide {
 opacity: 0.3;
}
 
.splide__slide.is-active {
 opacity: 1;
}
CSS

.splide__slide { opacity: 0.3; } .splide__slide.is-active { opacity: 1; }

また、breakpointsおよび focusオプションを使えば、次のようにして第2、第3の点を調整できます（coverを利用していないのであれば、fixedHeightは必要ありません）。

new Splide( '#thumbnail-slider', {
 fixedWidth : 100,
 fixedHeight: 60,
 gap : 10,
 rewind : true,
 pagination : false,
 cover : true,
 focus : 'center',
 breakpoints: {
 600: {
 fixedWidth : 60,
 fixedHeight: 44,
 },
 },
} ).mount();
JavaScript

new Splide( '#thumbnail-slider', { 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-slider', {
 fixedWidth : 100,
 fixedHeight : 60,
 gap : 10,
 rewind : true,
 pagination : false,
 cover : true,
 isNavigation: true,
 breakpoints : {
 600: {
 fixedWidth : 60,
 fixedHeight: 44,
 },
 },
} ).mount();
JavaScript

new Splide( '#thumbnail-slider', { 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-slider', { ... } );
var thumbnails = new Splide( '#thumbnail-slider', { ... } );
 
main.sync( thumbnails );
main.mount();
thumbnails.mount();
JavaScript

var main = new Splide( '#main-slider', { ... } ); var thumbnails = new Splide( '#thumbnail-slider', { ... } ); main.sync( thumbnails ); main.mount(); thumbnails.mount();

完成しました！🎊 このチュートリアルで作成したコードは以下の通りです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
document.addEventListener( 'DOMContentLoaded', function () {
 var main = new Splide( '#main-slider', {
 type : 'fade',
 rewind : true,
 pagination: false,
 arrows : false,
 } );
 
 var thumbnails = new Splide( '#thumbnail-slider', {
 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();
} );
JavaScript

document.addEventListener( 'DOMContentLoaded', function () { var main = new Splide( '#main-slider', { type : 'fade', rewind : true, pagination: false, arrows : false, } ); var thumbnails = new Splide( '#thumbnail-slider', { 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(); } );