Cara Membuat Galeri Gambar di Postingan (Valid AMP) Untuk Blog AMP

Seperti yang kita ketahui penggunaan kode pada template AMP sangat terbatas dan tidak boleh asal menggunakan kode CCS atau script agar tidak merusak struktur data template kita (agar valid AMP).

Nah, pada kesempatan kali ini saya akan membagikan tutorial Cara Membuat Galeri Gambar di Postingan (Valid AMP) Untuk Blog AMP. Demo bisa lihat di bawah dekat kode yang di gunakan dan pilih sesuai dengan gaya atau style yang Anda inginkan.

Tapi sebelum menggunakan style galeri gambar amp-carausel pastikan dulu Anda sudah menerapkan kode javascipt berikut ini di template AMP yang Anda gunakan.
<script async="async" custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Atau seperti berikut ini :
<script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/>

Nah, berikut ini ada 2 style atau gaya galeri gambar amp-carausel silahkan pilih sesuai keinginan Anda.

Style 1

Untuk tampilan style 1, silahkan gunakan kode berikut ini dan sesuaikan kode yang sudah saya beri tanda background kuning.
<amp-carousel id="carousel-with-preview" width="400" height="240" layout="responsive" type="slides"> <amp-img src="Url-Image-1" width="450" height="250" layout="responsive" alt="ALT Image 1"></amp-img> <amp-img src="Url-Image-2" width="400" height="250" layout="responsive" alt="ALT Image 2"></amp-img> <amp-img src="Url-Image-3" width="400" height="250" layout="responsive" alt="ALT Image 3"></amp-img> <amp-img src="Url-Image-4" width="400" height="250" layout="responsive" alt="ALT Image 4"></amp-img><amp-img src="Url-Image-5" width="400" height="250" layout="responsive" alt="ALT Image 5"></amp-img> <amp-img src="Url-Image-6" width="400" height="250" layout="responsive" alt="ALT Image 6"><amp-img src="Url-Image-7" width="400" height="250" layout="responsive" alt="ALT Image 7">
</amp-img></amp-carousel>

<amp-carousel class="carousel-preview" width="auto" height="48" layout="fixed-height" type="carousel"><button on="tap:carousel-with-preview.goToSlide(index=1)"> <amp-img src="Url-Image-1" width="55" height="35" alt="ALT Image 1"></amp-img> </button> <button on="tap:carousel-with-preview.goToSlide(index=2)"> <amp-img src="Url-Image-2" width="55" height="35" alt="ALT Image 2"></amp-img> </button> <button on="tap:carousel-with-preview.goToSlide(index=3)"> <amp-img src="Url-Image-3" width="55" height="35" alt="ALT Image 3"></amp-img> </button> <button on="tap:carousel-with-preview.goToSlide(index=4)"> <amp-img src="Url-Image-4" width="55" height="35" alt="ALT Image 4"></amp-img> </button><button on="tap:carousel-with-preview.goToSlide(index=5)"> <amp-img src="Url-Image-5" width="55" height="35" alt="ALT Image 5"></amp-img> </button><button on="tap:carousel-with-preview.goToSlide(index=6)"> <amp-img src="Url-Image-6" width="55" height="35" alt="ALT Image 6"></amp-img> </button><button on="tap:carousel-with-preview.goToSlide(index=7)"> <amp-img src="Url-Image-7" width="55" height="35" alt="ALT Image 7"></amp-img> </button></amp-carousel>

Style 2
Nah, untuk style 2 dan terakhir silahkan gunakan kode berikut ini, dan sama seperti kode-kode sebelumnya silahkan sesuaikan kode yang saya tandai.
<amp-carousel width="450" height="300"> <amp-img src="Url-Image-1" width="450" height="300" alt="ALT IMAGE 3"></amp-img> <amp-img src="Url-Image-2" width="450" height="300" alt="ALT IMAGE 3"></amp-img> <amp-img src="Url-Image-3" width="450" height="300" alt="ALT IMAGE 3"></amp-img> </amp-carousel>

Reaksi:
Share this with short URL:

You Might Also Like: