Thumbnail Carousel

サムネイルスライダー

はじめに

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

  • Sample Slide 01
  • Sample Slide 02
  • Sample Slide 03
  • Sample Slide 04
  • Sample Slide 05
  • Sample Slide 06
  • Sample Slide 07
  • Sample Slide 08
  • Sample Slide 09
  • Sample Thumbnail 01
  • Sample Thumbnail 02
  • Sample Thumbnail 03
  • Sample Thumbnail 04
  • Sample Thumbnail 05
  • Sample Thumbnail 06
  • Sample Thumbnail 07
  • Sample Thumbnail 08
  • Sample Thumbnail 09

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>
HTML

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

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

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

ただ、このままではスライドの幅は固定できても、中の画像自体がはみだしてしまいます。もしサムネイル画像のアスペクト比が揃っているのであれば、次のようなCSSを追加するだけですみます。

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

もしアスペクト比がそろっていない場合は、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();
} );
JavaScript
.splide__slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
CSS

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

  • Sample Slide 01
  • Sample Slide 02
  • Sample Slide 03
  • Sample Slide 04
  • Sample Slide 05
  • Sample Slide 06
  • Sample Slide 07
  • Sample Slide 08
  • Sample Slide 09

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

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

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

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

また、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();
JavaScript

次に、各スライドをクリック可能にするため、isNavigationtrueに設定します。

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();
JavaScript

これで、サムネイルスライダーは完成しました。各サムネイルをクリックして、動作を確認してみてください。

  • Sample Slide 01
  • Sample Slide 02
  • Sample Slide 03
  • Sample Slide 04
  • Sample Slide 05
  • Sample Slide 06
  • Sample Slide 07
  • Sample Slide 08
  • Sample Slide 09

初期設定では、わずかでもマウスが移動するとドラッグとみなされ、サムネイルのクリックは無視されます。この閾値はdragMinThresholdオプションで調整できます。

メインスライダー

このチュートリアルでは、メインスライダーとして次のようなフェードスライダーを使用します。特に難しい点はありませんが、後でスクリプトから取得するため、サムネイルスライダーとは異なるID(またはクラス)を付与しておいてください。

  • Sample Slide 01
  • Sample Slide 02
  • Sample Slide 03
  • Sample Slide 04
  • Sample Slide 05
  • Sample Slide 06
  • Sample Slide 07
  • Sample Slide 08
  • Sample Slide 09

なお、この例では矢印やページネーションを無効にしていますが、もし利用したい場合は該当するオプションを削除してください。

スライダーの同期

最後に、Splide#sync()メソッドを用いて、作成した2つのスライダーを同期させます。このメソッドは、Splide#mount()よりも前に事項する必要がある点に注意してください。

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

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

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();
} );
JavaScript