百聞は一見にしかずなので、まずは、以下の表示例をご覧下さい。各スライドをクリックすると、リンク先のページが表示されます。
ネイティブAMPの場合は、パソコンページでもAMPコンポーネントを使用した表示を行うことができるのが特徴です。
上のカルーセルの設定
属性(アトリビュート)の設定については、以下をご覧下さい。
- タイプはスライド
- 自動再生・ループ
- 3秒ごとに自動で次のスライドを表示
- 各スライド(amp-img)に該当するページへのリンクを付与
amp-carousel
amp-carouselは、AMPのコンポーネントとして標準で提供されています。複数の類似したコンテント(例:画像など)を水平に並べて表示する柔軟でパフォーマンスの高い汎用カルーセルです。必須スクリプト | <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> |
サポートレイアウト |
|
属性(アトリビュート)
type
typeは、カルーセル(carousel: デフォルト)かスライド(slides)の2種類から選択します。height (必須)
カルーセルの高さをピクセルで指定します。controls(オプション)
モバイル端末でカルーセルのアイテムをユーザーの操作(ナビゲーション)用に左と右の矢印を表示します。デフォルトでは、モバイルのナビゲーション用の矢印は、数秒後に非表示になります。矢印の表示はスタイリングで設定できます。メディアクエリで、特定の画面幅でのみ表示させることも可能です。デスクトップ(パソコン)では、子が一つでない限り、矢印は常に表示されます。data-next-button-aria-label(オプション)
amp-carousel-button-nextのaria-labelを設定します。値を入れていない場合、"Next item in carousel" (カルーセルの次のアイテム)がaria-labelのデフォルトとして表示されます。data-prev-button-aria-label(オプション)
amp-carousel-button-prevのaria-labelを設定します。値を入れていない場合、"Previous item in carousel" (カルーセルの前のアイテム)がaria-labelのデフォルトとして表示されます。autoplay(オプション)
ユーザーの操作なしに自動で次のスライドを表示します。- デフォルトでは、5000ミリ秒(5秒)の間隔で次に移動します。delay アトリビュートを使用するとオーバーライド(設定を上書き)することができます。
- loop (ループ)アトリビュートと組み合わせて使用します。
- 自動再生するには、最低2枚のスライドが必要となります。
- typeでスライドを設定したときのみ有効となります。
値を指定した場合:
- loopが既に存在しない場合は、loop属性をamp-carouselに設定します。
- 必要な数のループが実行された後にloop属性を削除します。
Disqus コメント