AMP

amp-carousel

Description

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

 

Required Scripts

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

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

必須のスクリプト <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>
このスニペットを 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-carouselloop 属性が付加されます。
  • 自動再生を行うには 2 枚以上のスライドが必要です。
  • 適用されるのは type=slides を指定したカルーセルに限られます。
値を指定した場合:
  • loop 属性が存在しない場合は、amp-carouselloop 属性が付加されます。
  • 必要な数のループを行った後、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 にアクセスする