Cara Membuat Foto Carousel Di Template AMP

Template AMP memang beda dengan template non AMP, terutama di HTML banyak perbedaan untuk menerapkan script widget contohnya, nah kali ini saya ingin berbagi bagaimana caranya membuat gambar atau foto carousel di template AMP yang bisa berguna untuk image gallery sebuah produk jika anda menggunakan template landing page AMP, anda bisa membuat desain foto carousel produk anda, bisa juga dengan menambah link pada foto produk, ada beberapa type carousel AMP yang bisa anda terapkan atau anda coba, anda bisa menerapkan di head,sidebar,body atau footer

namun sebelum mencoba pastikan template AMP anda telah memiliki javascript AMP dibawah ini

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

atau seperti koder berikut

<script async custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js '/>

Pertama
AMP dengan type carousel yang menggunakan tombol next dan prev di sebelah kanan dan kiri
kodenya sebagai berikut.

<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>

Silahkan sesuaikan dengan keinginan, ganti link /img/image.jpg dengan url gambar anda, anda bisa menambah sampai 10 gambar atau lebih contohnya AMP carousel

Kedua
AMP carousel dengan type slides dengan ukuran yang lebih besar dan masih menggunakan tombol next dan prev ini cocok untuk anda simpan di body, kodenya sebagai berikut.

<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>

Ketiga

AMP carousel dengan type autoplay, kodenya sebagai berikut

<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>

Sekian dan selamat mencoba

Share :