カルーセルを追加する
モバイルページでよく使われるもう 1 つの機能は、カルーセルです。amp-carousel
コンポーネントを使用すると、AMP ページにカルーセルを簡単に追加できます。まずは、画像のカルーセルなどの簡単な例から見てみましょう。
シンプルな画像のカルーセル
次の JavaScript リクエストをドキュメントの <head>
タグに追加して、必ず amp-carousel
コンポーネント ライブラリを含めてください。
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
次に、幅と高さをあらかじめ定義して、シンプルな画像のカルーセルをレスポンシブ レイアウトに埋め込んでみましょう。ページに以下を追加します。
<amp-carousel layout="fixed-height" height="168" type="carousel" > <amp-img src="mountains-1.jpg" width="300" height="168"></amp-img> <amp-img src="mountains-2.jpg" width="300" height="168"></amp-img> <amp-img src="mountains-3.jpg" width="300" height="168"></amp-img> </amp-carousel>
ページを更新すると、次のカルーセルが表示されます。
amp-carousel
コンポーネントはさまざまな方法で設定できます。一度に 1 つの画像のみが表示されるように UI を変更して、カルーセルをレスポンシブ レイアウトにしてみましょう。
これを行うには、まず amp-carousel
の type
を carousel
から slides
に変更し、layout
を responsive
に変更して、width
を 300 に設定します(height
と width
の両方を必ず定義してください)。"layout=responsive"
属性を amp-carousel
の子コンポーネント amp-img
に追加します。
ページを再読み込みします。今度は、一連の要素がスクロールされるのではなく、一度に 1 つの要素が表示されます。横方向にスワイプして、要素間を移動してみてください。3 番目の要素までスワイプすると、それ以上スワイプできなくなります。
次に、loop
属性を追加します。ページを更新し、すぐに左にスワイプしてみてください。カルーセルは無限にループします。
最後に、このカルーセルが 2 秒おきに自動で回転するようにしましょう。amp-carousel
に autoplay
属性と delay
属性を追加し、値を 2000
に設定します(例: delay="2000"
)。
最終結果は次のようになります。
<amp-carousel layout="responsive" width="300" height="168" type="slides" autoplay delay="2000" loop> <amp-img src="mountains-1.jpg" width="300" height="168" layout="responsive"></amp-img> <amp-img src="mountains-2.jpg" width="300" height="168" layout="responsive"></amp-img> <amp-img src="mountains-3.jpg" width="300" height="168" layout="responsive"></amp-img> </amp-carousel>
ページを更新して回転してみましょう。
amp-carousel
のタイプが carousel
のときに使用したレイアウト タイプが fixed-height
だったことに気づいたかもしれません。carousel
タイプでサポートされるレイアウト タイプは限られています。たとえば、carousel
タイプでは responsive
レイアウトをサポートしていません。名前が示すように、fixed-height 要素は使用できるスペースを占有しますが、高さは変わりません。fixed-height 要素の場合、height
属性の定義は必須ですが、width
属性は auto
に設定することも、未設定のままにすることもできます。
カルーセル コンテンツの組み合わせ
画像のカルーセルは優れた効果を発揮しますが、より複雑なコンテンツをカルーセルに表示するにはどうすればよいでしょうか。では、広告、テキスト、画像をすべて 1 つのカルーセルに配置し、組み合わせて使ってみましょう。amp-carousel
は本当にそのようなコンテンツの組み合わせをすべて同時に処理できるでしょうか。もちろん処理できます。
まず、次のスタイルを <style amp-custom>
に追加して、amp-fit-text
および amp-carousel
コンポーネントが一体となって安全に機能するようにします。
amp-fit-text { white-space: normal; }
次に、シンプルなカルーセルを次のものと置き換えます。
<amp-carousel layout="fixed-height" height="250" type="carousel" > <amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img> <amp-ad width="300" height="250" type="doubleclick" data-slot="/35096353/amptesting/image/static"> <div placeholder>This ad is still loading.</div> </amp-ad> <amp-fit-text width="300" height="250" layout="fixed"> Big, bold article quote goes here. </amp-fit-text> </amp-carousel>
ページを更新すると、次のように表示されます。
詳しくは、amp-carousel
コンポーネントのリファレンス ドキュメントをご覧ください。
最後の例では、amp-ad
コンポーネントに placeholder
属性を持つ子要素 div
が含まれていたことに気づいたかもしれません。このチュートリアルの前半では、fallback
属性を持つ amp-ad
の同様のシナリオがありました。プレースホルダとフォールバックの違いは何でしょうか。fallback
要素は、親要素が読み込まれなかった場合、つまり利用可能な広告がない場合に表示されます。一方 placeholder
要素は、読み込み中に親要素の代わりに表示されます。いわば、これらは親要素の読み込みプロセスの前後に表示される要素です。詳しくは、プレースホルダとフォールバックをご覧ください。