1 つ目の変更点は、新しい JavaScript メソッド（
goToSlide）がサポートされ、ユーザーのタップやクリックで
<amp-carousel> を特定のスライドに進めることができるようになったことです。これは、イメージ ギャラリーにおける UX の大幅な改善につながります。2 つ目の変更点は、
<amp-selector> を使ってフォームにイメージ サムネイルを簡単に組み込めるようになったことです。これらは多くのデベロッパーにとってとても役立つ機能になると思われ、イメージを多用した報道や e コマースの商品ページといった形でユーザーに魅力的なコンテンツを提供することが可能になります。
goToSlide メソッドの使用: サムネイル付きカルーセル
これまで、<amp-carousel> ではイメージ ギャラリーのいくつかの重要な操作パターンがサポートされていませんでした。ユーザーはカルーセル内にあるイメージの数をどうすれば知ることができるでしょうか。カルーセル内に 8 つあるうち 5 番目のイメージに直接ジャンプしたい場合は、どうすればよいでしょうか。矢印アイコンに気づかない場合や、ページ内でアイコンが隠れている場合、ユーザーはカルーセルがスワイプ可能であることにどのようにして気づくでしょうか。
多くのデベロッパーやデザイナーは、ユーザーにイメージ サムネイルを提供することで、この問題を解決しています。サムネイルをタップした際に、指定したスライドまで自動的にカルーセルを進めるようにするのです。
goToSlide メソッドを使うと、この機能を AMP でも実現できます。ユーザーのタップ時にこのメソッドを呼び出すと、カルーセルを特定のスライドに進めることができます。
実装例
<!-- Primary Carousel -->
<amp-carousel id="carousel-with-preview"
width="400"
height="300"
layout="responsive"
type="slides">
<amp-img src="https://example.com/path/to?image=10"
width="400"
height="300"
layout="responsive"
alt="a sample image"></amp-img>
<amp-img src="https://example.com/path/to?image=11"
width="400"
height="300"
layout="responsive"
alt="a sample image"></amp-img>
</amp-carousel>
<!-- Carousel thumbnails -->
<div class="carousel-preview">
<button on="tap:carousel-with-preview.goToSlide(index=0)">
<amp-img src="https://example.com/path/to?image=10"
width="60"
height="40"
layout="responsive"
alt="a sample image"></amp-img>
</button>
<button on="tap:carousel-with-preview.goToSlide(index=1)">
<amp-img src="https://example.com/path/to?image=11"
width="60"
height="40"
layout="responsive"
alt="a sample image"></amp-img>
</button>
</div>
たくさんのイメージがある場合は、スクロールできる小さなカルーセルにサムネイルを入れることもできます。
