モバイルページでよく使われるもう 1 つの機能は、カルーセルです。amp-carousel コンポーネントを使用すると、AMP ページにカルーセルを簡単に追加できます。まずは、画像のカルーセルなどの簡単な例から見てみましょう。

シンプルな画像のカルーセル

次の JavaScript リクエストをドキュメントの <head> タグに追加して、必ず amp-carousel コンポーネント ライブラリを含めてください。

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

次に、幅と高さをあらかじめ定義して、シンプルな画像のカルーセルをレスポンシブ レイアウトに埋め込んでみましょう。ページに以下を追加します。

<amp-carousel layout="fixed-height" height="168" type="carousel" >
  <amp-img src="mountains-1.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168"></amp-img>
</amp-carousel>

ページを更新すると、次のカルーセルが表示されます。

シンプルな画像のカルーセル

amp-carousel コンポーネントはさまざまな方法で設定できます。一度に 1 つの画像のみが表示されるように UI を変更して、カルーセルをレスポンシブ レイアウトにしてみましょう。

これを行うには、まず amp-carouseltypecarousel から slides変更し、layoutresponsive変更して、width を 300 に設定します(heightwidth の両方を必ず定義してください)。"layout=responsive" 属性を amp-carousel の子コンポーネント amp-img追加します。

ページを再読み込みします。今度は、一連の要素がスクロールされるのではなく、一度に 1 つの要素が表示されます。横方向にスワイプして、要素間を移動してみてください。3 番目の要素までスワイプすると、それ以上スワイプできなくなります。

次に、loop 属性を追加します。ページを更新し、すぐに左にスワイプしてみてください。カルーセルは無限にループします。

最後に、このカルーセルが 2 秒おきに自動で回転するようにしましょう。amp-carouselautoplay 属性と delay 属性を追加し、値を 2000 に設定します(例: delay="2000")。

最終結果は次のようになります。

<amp-carousel layout="responsive" width="300" height="168" type="slides" autoplay delay="2000" loop>
  <amp-img src="mountains-1.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168" layout="responsive"></amp-img>
</amp-carousel>

ページを更新して回転してみましょう。

カルーセル コンテンツの組み合わせ

画像のカルーセルは優れた効果を発揮しますが、より複雑なコンテンツをカルーセルに表示するにはどうすればよいでしょうか。では、広告、テキスト、画像をすべて 1 つのカルーセルに配置し、組み合わせて使ってみましょう。amp-carousel は本当にそのようなコンテンツの組み合わせをすべて同時に処理できるでしょうか。もちろん処理できます。

まず、次のスタイルを <style amp-custom>追加して、amp-fit-text および amp-carousel コンポーネントが一体となって安全に機能するようにします。

amp-fit-text {
    white-space: normal;
}

次に、シンプルなカルーセルを次のものと置き換えます。

<amp-carousel layout="fixed-height" height="250" type="carousel" >
    <amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img>

    <amp-ad width="300" height="250"
      type="doubleclick"
      data-slot="/35096353/amptesting/image/static">
        <div placeholder>This ad is still loading.</div>
    </amp-ad>

    <amp-fit-text width="300" height="250" layout="fixed">
        Big, bold article quote goes here.
    </amp-fit-text>
</amp-carousel>

ページを更新すると、次のように表示されます。

コンテンツを組み合わせたカルーセル

詳しくは、amp-carousel コンポーネントのリファレンス ドキュメントをご覧ください。