AMP

amp-carousel

汎用カルーセルは、横軸に沿って複数の類似コンテンツを表示します。優れた柔軟性とパフォーマンスを備えています。

必須のスクリプト <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
サポートされるレイアウト
  • カルーセル: fixed、fixed-height、nodisplay。
  • スライド: fill、fixed、fixed-height、flex-item、nodisplay、responsive。
AMP By Example:

動作

amp-carousel コンポーネントの直接の子は、それぞれカルーセル内の 1 つのアイテムと見なされます。各ノードに対して、任意の HTML 子を指定することもできます。

カルーセルは、任意の数のアイテムと、アイテム 1 つ分を前後に移動するナビゲーション矢印(省略可)で構成されます。

ユーザーがスワイプを行ったり、矢印キーを使用したり、オプションのナビゲーション矢印をクリックしたりすると、カルーセルがアイテム間を移動します。

<amp-carousel width="450"
  height="300">
  <amp-img src="/static/inline-examples/images/image1.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="/static/inline-examples/images/image2.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="/static/inline-examples/images/image3.jpg"
    width="450"
    height="300"></amp-img>
</amp-carousel>
Open this snippet in playground

特定のスライドに進む

要素の on 属性のメソッドを tap:carousel-id.goToSlide(index=N) に設定した場合、ユーザーのタップまたはクリックによって、「carousel-id」ID のカルーセルが index=N のスライドに進みます(1 番目のスライドは index=0、2 番目のスライドは index=1 で、以降も順に続いていきます)。

以下の例の場合、カルーセルは 3 つの画像で構成されており、カルーセルの下にプレビュー ボタンが配置されます。ユーザーがいずれかのボタンをクリックすると、対応するカルーセル アイテムが表示されます。

<amp-carousel id="carousel-with-preview"
    width="450"
    height="300"
    layout="responsive"
    type="slides">
    <amp-img src="/static/inline-examples/images/image1.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="apples"></amp-img>
    <amp-img src="/static/inline-examples/images/image2.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="lemons"></amp-img>
    <amp-img src="/static/inline-examples/images/image3.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="blueberries"></amp-img>
  </amp-carousel>
  <div class="carousel-preview">
    <button on="tap:carousel-with-preview.goToSlide(index=0)">
      <amp-img src="/static/inline-examples/images/image1.jpg"
        width="60"
        height="40"
        alt="apples"></amp-img>
    </button>
    <button on="tap:carousel-with-preview.goToSlide(index=1)">
      <amp-img src="/static/inline-examples/images/image2.jpg"
        width="60"
        height="40"
        alt="lemons"></amp-img>
    </button>
    <button on="tap:carousel-with-preview.goToSlide(index=2)">
      <amp-img src="/static/inline-examples/images/image3.jpg"
        width="60"
        height="40"
        alt="blueberries"></amp-img>
    </button>
  </div>
Open this snippet in playground

属性

# スタイル設定
type カルーセル アイテムの表示タイプを指定します。以下のように指定します。
  • carousel (デフォルト): すべてのスライドを表示し、横方向にスクロールできます。このタイプがサポートしているレイアウトは、fixed, fixed-height, nodisplay に限られます。
  • slides: 一度に 1 つのスライドだけを表示します。このタイプがサポートしているレイアウトは、fill, fixed, fixed-height, flex-item, nodisplay, responsive です。
height(必須) カルーセルの高さをピクセル単位で指定します。
controls(省略可) モバイル デバイス上でカルーセル アイテムを移動するための左矢印と右矢印を常に表示します。 デフォルトでは、モバイル上のナビゲーション矢印は数秒後に非表示になります。 矢印の表示設定は、スタイル設定を通じて指定することもできます。また、メディアクエリを使用することで、特定の画面幅の場合に限り矢印を表示することもできます。パソコン上では、子が 1 つだけでない限り、常に矢印が表示されます。
data-next-button-aria-label(省略可) amp-carousel-button-next の aria-label を設定します。値を指定しなかった場合、「カルーセル内の次のアイテム」が aria-label のデフォルトになります。
data-prev-button-aria-label(省略可) amp-carousel-button-prev の aria-label を設定します。値を指定しなかった場合、「カルーセル内の前のアイテム」が aria-label のデフォルトになります。
data-button-count-format(省略可) (%s of %s) といった形式のフォーマット文字列で、amp-carousel-button-next / amp-carousel-button-prev の aria-label のサフィックスとして使用されます。これにより、スクリーン リーダーを使用しているユーザーに向けて、カルーセルの進行状況を知らせることができます。値を指定しなかった場合、「(%s of %s)」がデフォルトになります。
autoplay(省略可) ユーザーの操作なしでスライドを次のスライドに移動します。
値を指定しなかった場合:
  • デフォルトでは、5,000 ミリ秒(5 秒)間隔で次のスライドに移動します。この設定は delay 属性によってオーバーライドできます。
  • loop 属性が存在しない場合は、amp-carouselloop 属性が付加されます。
  • 自動再生を行うには 2 枚以上のスライドが必要です。
  • 適用されるのは type=slides を指定したカルーセルに限られます。
値を指定した場合:
  • loop 属性が存在しない場合は、amp-carouselloop 属性が付加されます。
  • 必要な数のループを行った後、loop 属性を削除します。
delay(省略可) autoplay が有効なときに、次のスライドに進むまでの時間をミリ秒単位で指定します。delay 属性を適用できるのは、type=slides を指定したカルーセルに限られます。
loop(省略可) ユーザーが最初のアイテムの前や最終アイテムの次に進むことを許可します。ループを行うには少なくとも 3 つのスライドが必要です。loop 属性を適用できるのは、type=slides を指定したカルーセルに限られます。 例: controls、loop、delay 付き autoplay を有効にしたスライド カルーセルを表示する
wzxhzdk:2
Open this snippet in playground
共通の属性 この要素には、AMP コンポーネントに拡張された共通の属性が含まれます。
  • amp-carousel 要素セレクタを使用して、自由にスタイルを設定できます。
  • カルーセル アイテムをターゲティングするには、.amp-carousel-slide クラスセレクタを使用します。
  • amp-carousel ボタンが無効になっている場合、ボタンは非表示になります。
  • デフォルトでは、.amp-carousel-button はボタンの背景画像としてインライン SVG を使用します。下記の例のように、独自の SVG や画像でオーバーライドすることができます。

例: デフォルト .amp-carousel-button インライン SVG

.amp-carousel-button-prev {
  left: 16px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z" fill="#fff" /></svg>');
}

例: デフォルト .amp-carousel-button インライン SVG をオーバーライドする

.amp-carousel-button-prev {
  left: 5%;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M11.56 5.56L10.5 4.5 6 9l4.5 4.5 1.06-1.06L8.12 9z" fill="#fff" /></svg>');
}

検証

AMP 検証ツール仕様の amp-carousel ルールをご覧ください。

ご不明な点がある場合

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub