amp-carousel
Komponen amp-carousel memungkinkan Anda untuk melihat beberapa bagian konten serupa di sepanjang sumbu horizontal.
Agregar
Impor komponen amp-carousel tepat setelah pembukaan <head>.
Penggunaan dasar
Utilice type="carousel" untuk menampilkan daftar gambar sebagai strip berkelanjutan.
Gunakan type="slides" untuk menampilkan daftar gambar sebagai slide.
Atribut putar otomatis ( type = hanya slide ) memajukan slide ke slide berikutnya tanpa interaksi pengguna; secara default, ini akan memajukan slide dalam interval 5.000 milidetik (5 detik) dan dapat ditimpa oleh atribut penundaan .
Konten yang didukung
Setiap node ini juga dapat memiliki anak-anak HTML sewenang-wenang.
Kasing penggunaan yang baik untuk amp-carousel adalah galeri gambar, berikut ini beberapa contohnya.
Agregar
Impor komponen amp-carousel tepat setelah pembukaan <head>.
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Penggunaan dasar
Utilice type="carousel" untuk menampilkan daftar gambar sebagai strip berkelanjutan.
Contohnya<amp-carousel height="300" layout="fixed-height" type="carousel"> <amp-img src="/img/image1.jpg" width="400" height="300" alt="a sample image"></amp-img> <amp-img src="/img/image2.jpg" width="400" height="300" alt="another sample image"></amp-img> <amp-img src="/img/image3.jpg" width="400" height="300" alt="and another sample image"></amp-img> </amp-carousel>
Gunakan type="slides" untuk menampilkan daftar gambar sebagai slide.
Contohnya<amp-carousel width="400" height="300" layout="responsive" type="slides"> <amp-img src="/img/image1.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img> <amp-img src="/img/image2.jpg" width="400" height="300" layout="responsive" alt="another sample image"></amp-img> <amp-img src="/img/image3.jpg" width="400" height="300" layout="responsive" alt="and another sample image"></amp-img> </amp-carousel>
Atribut putar otomatis ( type = hanya slide ) memajukan slide ke slide berikutnya tanpa interaksi pengguna; secara default, ini akan memajukan slide dalam interval 5.000 milidetik (5 detik) dan dapat ditimpa oleh atribut penundaan .
Contohnya<amp-carousel width="400" height="300" layout="responsive" type="slides" autoplay delay="2000"> <amp-img src="/img/image1.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img> <amp-img src="/img/image2.jpg" width="400" height="300" layout="responsive" alt="another sample image"></amp-img> <amp-img src="/img/image3.jpg" width="400" height="300" layout="responsive" alt="and another sample image"></amp-img> </amp-carousel>
Konten yang didukung
Setiap node ini juga dapat memiliki anak-anak HTML sewenang-wenang.
Contohnya<amp-carousel height="300" layout="fixed-height" type="slides"> <div> <div class="blue-box"></div> This is a blue box. </div> <div> <div class="red-box"></div> This is a red box. </div> <div> <div class="green-box"></div> This is a green box. </div> </amp-carousel>This is a blue box.
This is a red box.
This is a green box.
Kasing penggunaan yang baik untuk amp-carousel adalah galeri gambar, berikut ini beberapa contohnya.