Home AMP BLOG Membuat slider gambar di blog amp

Membuat slider gambar di blog amp

Berikut merupakan cara mudah membuat slider carousel di blog valid amp dan yang pastinya responsive dengan ukuran template blog amp anda.

Apa itu slider ?

Slider biasa kita kenal dengan gambar atau tulisan yang bergerak sendiri dan biasanya ganti otomatis gambar atau tulisan.
Slider biasa dikenal dengan istilah lain carousel. Untuk membuat slider valid amp itu sangatlah mudah , karena amp sendiri sudah menyiapkan skrip khusus untuk slider , jadi kita ga usah bingung.

Untuk membuat carousel di blog amp yang pertama yang harus anda siapkan adalah, letakan script dibawah ini tepat diatas kode </head> 
<script async="" custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Lalu letakan kode slider gambar dibawah ini ditempat yang anda inginkan, yang penting di dalem <body>.
<amp-carousel layout="responsive" width="450" height="250" type="slides" autoplay="" delay="2000" loop="">
  <amp-img src="urlgambaranda1.jpg" width="450" height="250" layout="responsive"></amp-img>
  <amp-img src="urlgambaranda1.jpg" width="450" height="250" layout="responsive"></amp-img>
  <amp-img src="urlgambaranda1.jpg" width="450" height="250" layout="responsive"></amp-img>
</amp-carousel>

Nah mudah bukan.
referensi : https://amp.dev/id/documentation/guides-and-tutorials/start/add_advanced/adding_carousels/

Disqus Comments