百聞は一見にしかずなので、まずは、以下の表示例をご覧下さい。各スライドをクリックすると、リンク先のページが表示されます。
AMP Blogger@ブロギングライフの特徴
Bloggerのデータ容量は実際に利用する上では無制限に近いです
実際に利用している立場から見たBloggerの特徴と利点
ネイティブAMPの場合は、パソコンページでもAMPコンポーネントを使用した表示を行うことができるのが特徴です。
上のカルーセルの設定
属性（アトリビュート）の設定については、以下をご覧下さい。
- タイプはスライド
- 自動再生・ループ
- ３秒ごとに自動で次のスライドを表示
- 各スライド(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 コメント