amp-carousel

Description

横軸に沿って複数の類似コンテンツを表示します。

Required Scripts

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

Supported Layouts

fill fixed fixed-height flex-item intrinsic nodisplay responsive

実例

AMP for E-Commerce Getting Started Product Browse Page Product Page amp-carousel amp-lightbox-gallery Image Galleries with amp-carousel Video Carousels with amp-carousel News Article Recipe How to support Images with unknown Dimensions Basics of scrollbound effects Housing amp-analytics

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

必須のスクリプト	`<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 の例 amp-carousel を備えた画像ギャラリー

動作

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>

このスニペットを 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>

このスニペットを 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-carousel` に `loop` 属性が付加されます。自動再生を行うには 2 枚以上のスライドが必要です。適用されるのは `type=slides` を指定したカルーセルに限られます。値を指定した場合: `loop` 属性が存在しない場合は、`amp-carousel` に `loop` 属性が付加されます。必要な数のループを行った後、`loop` 属性を削除します。
delay（省略可）	`autoplay` が有効なときに、次のスライドに進むまでの時間をミリ秒単位で指定します。`delay` 属性を適用できるのは、`type=slides` を指定したカルーセルに限られます。
loop（省略可）	ユーザーが最初のアイテムの前や最終アイテムの次に進むことを許可します。ループを行うには少なくとも 3 つのスライドが必要です。`loop` 属性を適用できるのは、`type=slides` を指定したカルーセルに限られます。例: controls、loop、delay 付き autoplay を有効にしたスライドカルーセルを表示する `<amp-carousel type="slides" width="450" height="300" controls loop autoplay delay="3000" data-next-button-aria-label="Go to next slide" data-previous-button-aria-label="Go to previous slide"> <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>` このスニペットを 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 ルールをご覧ください。

さらに支援が必要ですか？

このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか？他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。

Stack Overflow にアクセスする

バグや不足している機能がありますか？

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub にアクセスする

amp-carousel 0.2 0.1