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

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

次に、サムネイル一覧として表示されるよう、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

.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;
}

スライダー

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

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

splide.mount();
JavaScript

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


splide.mount();

サムネイル

ここからが本番です！💪　まず、サムネイルをクリックできるようにするため、それぞれの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

// リスト要素をクラス名ですべて取得
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 () {
    // クリックされたときの処理
  } );
}

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

var splide = new Splide( ... );

...

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

var splide = new Splide( ... );


...


function initThumbnail( thumbnail, index ) {
  thumbnail.addEventListener( 'click', function () {
    splide.go( index );
  } );
}

ここまでで「サムネイルをクリックしたらメインのスライダーを動かす」という重要な部分は実装できました。ただ、このままでは「どのサムネイルが現在選択されているのか」を知る手段がありません。そこで、サムネイルに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

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

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

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

.thumbnail {
  ...
  opacity: 0.3;
}

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

.thumbnail {
  ...
  opacity: 0.3;
}


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

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

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

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

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

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
29
30
31
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

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

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

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

補足

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

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