BLOG

ブログ

AMPサイトでのカルーセル

AMPサイトでのカルーセル

複数の画像を1枚ずつスライドさせて表示するものです。

head内に <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
を記述する

高さ(height)の指定は必須となっています <amp-carousel height="カルーセルの高さ"></amp-carousel>

カルーセル用の画像はamp-imgで指定します <amp-carousel width="カルーセルの幅" height="カルーセルの高さ">
<amp-img src="画像の指定" width="幅" height="高さ"></amp-img>
<amp-img src="画像の指定" width="幅" height="高さ"></amp-img>
</amp-carousel>

typeの指定
type="carousel":全てのスライドが表示される

type="slides":1枚ずつ画像が表示されますが、デフォルトでは画像は自動で切り替わりません、autoplayを付けることで自動で切り替えることができます デフォルトでは5000ミリ秒の間隔でスライドされ、間隔のスピードはで指定することもできます。

▲PAGE TOP

©ITコンサルタントの網樹屋