Gallery

ギャラリー

はじめに

このチュートリアルでは、下のようなギャラリーの作成を通して、基本的なAPIの使い方を解説します。各サムネイルはクリックでき、かつメインのスライダーの動きに合わせて選択状態が切り替わります。

サムネイルスライダーの作り方を探している場合は、こちらのチュートリアルを参照してください。

HTMLとCSS

まず、ギャラリーを構成するためのHTMLを記載していきます。

<section id="main-carousel" class="splide" aria-label="お気に入りの写真">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="image1.jpg" />
</li>
<li class="splide__slide">
<img src="image2.jpg" />
</li>
<li class="splide__slide">
<img src="image3.jpg" />
</li>
<li class="splide__slide">
<img src="image4.jpg" />
</li>
</ul>
</div>
</section>
<ul id="thumbnails" class="thumbnails">
<li class="thumbnail">
<img src="thumbnail1.jpg" />
</li>
<li class="thumbnail">
<img src="thumbnail2.jpg" />
</li>
<li class="thumbnail">
<img src="thumbnail3.jpg" />
</li>
<li class="thumbnail">
<img src="thumbnail4.jpg" />
</li>
</ul>
HTML

次に、サムネイル一覧として表示されるよう、CSSを調整します。この例では以下のようなCSSを作成しました。

.thumbnails {
display: flex;
margin: 1rem auto 0;
padding: 0;
justify-content: center;
}
.thumbnail {
width: 70px;
height: 70px;
overflow: hidden;
list-style: none;
margin: 0 0.2rem;
cursor: pointer;
}
.thumbnail img {
width: 100%;
height: auto;
}
CSS

スライダー

次に、スライダーを初期化します。サムネイルを表示するため、以下の例では機能が重複するページネーションを無効にしています。

var splide = new Splide( '#main-carousel', {
pagination: false,
} );
splide.mount();
JavaScript

サムネイル

ここからが本番です!💪 まず、サムネイルをクリックできるようにするため、それぞれのclickイベントにリスナを登録しましょう。

// リスト要素をクラス名ですべて取得
var thumbnails = document.getElementsByClassName( 'thumbnail' );
for ( var i = 0; i < thumbnails.length; i++ ) {
initThumbnail( thumbnails[ i ], i );
}
// それぞれのリスト要素を初期化するための関数
function initThumbnail( thumbnail, index ) {
thumbnail.addEventListener( 'click', function () {
// クリックされたときの処理
} );
}
JavaScript

サムネイルがクリックされたら、Splide#go()メソッドを使ってスライダーを動かしてみます。この関数は、引数にスライドのインデックスをとることができます。

var splide = new Splide( ... );
...
function initThumbnail( thumbnail, index ) {
thumbnail.addEventListener( 'click', function () {
splide.go( index );
} );
}
JavaScript

ここまでで「サムネイルをクリックしたらメインのスライダーを動かす」という重要な部分は実装できました。ただ、このままでは「どのサムネイルが現在選択されているのか」を知る手段がありません。そこで、サムネイルにis-activeクラスを付与して、CSSで強調表示ができるよう改善してみます。

アクティブなスライドはクリック時だけでなく、メインのスライダー自体が操作されたときにも変わりますので、スライダーが移動するときに配信される'move'イベントを利用します。

var thumbnails = document.getElementsByClassName( 'thumbnail' );
var current; // 現在のサムネイルを保持するための変数
...
splide.on( 'move', function () {
if ( current ) {
current.classList.remove( 'is-active' );
}
// Splide#indexは現在アクティブなスライドのインデックスを返す
var thumbnail = thumbnails[ splide.index ];
if ( thumbnail ) {
thumbnail.classList.add( 'is-active' );
current = thumbnail;
}
} );
JavaScript

上の例に現れるcurrentは、現在アクティブなサムネイルの要素を保持するための変数で、アクティブなスライドが変わったときis-activeクラスを削除するために存在します。

このis-activeを参照して、CSSによりサムネイルを強調表示してみましょう。このチュートリアルでは、opacityを変化させることにしました。

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

is-activeクラスはスライダーが動くときに更新されるため、ロード直後はいずれのサムネイルも強調表示されません。手動で最初のサムネイルにクラスを付与しても構いませんが、ここではSplideが初期化された直後に発生するmountedイベントを利用して、初期化時にもクラスが更新されるよう修正してみます。こうしておくと、仮にstartオプションが0でなかった場合にも正しく動作するようになります。

splide.on( 'mounted move', function () {
...
} );
JavaScript

これで完成です!🎉 このチュートリアルでのコードの全貌は以下のとおりです。

var splide = new Splide( '#main-carousel', {
pagination: false,
} );
var thumbnails = document.getElementsByClassName( 'thumbnail' );
var current;
for ( var i = 0; i < thumbnails.length; i++ ) {
initThumbnail( thumbnails[ i ], i );
}
function initThumbnail( thumbnail, index ) {
thumbnail.addEventListener( 'click', function () {
splide.go( index );
} );
}
splide.on( 'mounted move', function () {
var thumbnail = thumbnails[ splide.index ];
if ( thumbnail ) {
if ( current ) {
current.classList.remove( 'is-active' );
}
thumbnail.classList.add( 'is-active' );
current = thumbnail;
}
} );
splide.mount();
JavaScript

なお、このチュートリアルはCodeSandboxにも置いてあります。

このギャラリーはdestroyオプションに対応していません。対応させるにはエクステンションを作成し、イベントハンドラを正しく管理する必要があります。

補足

このギャラリーは、アクセシビリティへの対応が十分であるとは言えません。本番で使用する際は、次のような項目もあわせて実装することをおすすめします。

  • キーボードユーザのために、サムネイルにtabindex="0"を付与する
  • aria-labelを用いて、サムネイルをクリックすると何が起こるのかをスクリーンリーダに知らせる
  • サムネイルにaria-currentを割り当て、現在アクティブなスライドを支援技術に知らせる
  • サムネイルにaria-controlsを割り当て、対応関係を支援技術に知らせる