Cara Membuat Slide Gambar (AMP Carousel) di Blog / Web AMP


DatabaseArtikel.com – Hadirnya fitur amp yang menambahkan banyak jenis kode yang menarik untuk web atau blog amp kalian.

Salah satu fiturnya adalah image slider yang dimana anda dapat membuat sebuah gambar slide bergerak ke kiri dan kanan. Tidak hanya gambar saja anda bisa menyisipkan baik teks dan juga video.

Karena itu apabila anda ingin mempercantik tampilan blog anda dengan menggunakan tampilan image slider bisa pasang kode berikut di blog anda.

Istilah gambar slide ini disebut dengan AMP Carousel yang bertujuan untuk bisa menampilkan banyak gambar dalam satu frame saja.

Cara ini dibuat agar gambar tidak tersusun panjang ke bawah. Teknik ini biasa digunakan pada web ecommerce (web jual beli) untuk menampilkan preview produk dari segala sudut pandang.

Berikut kode beserta tutorial pemasangannya. Ada 2 kode ini yaitu slide bergerak manual dan otomatis bergeser sendiri.

Kode ini bisa dipakai di AMP Blogger dan WordPress.

Cara membuat Image Slider bergerak manual di AMP

Pertama pasang kode berikut di <head>

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

Setelah itu anda tambahkan kode berikut ini didalam

<amp-carousel width="400" height="300" layout="responsive" type="slides">

<amp-img src="#" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>

<amp-img src="#" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>

<amp-img src="#" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>

</amp-carousel>

Anda tinggal mengganti source atau tanda pagar # diatas dengan link gambar yang ingin kalian gunakan.

Pastikan untuk ukuran gambarnya anda juga rubah sesuai dengan ukuran yang digunakan di kodenya bagian Width dan Height.

Dan untuk hasilnya bisa dilihat seperti berikut ini :

Nah apakah sudah berhasil mencobanya ? Kode diatas ada slide gambar manual yang dapat bergerak jika anda mengklik arah kiri dan kanan.

Selanjutnya jika anda ingin slider gambarnya bergerak otomatis maka gunakan kode berikut ini.

Cara membuat Slide Gambar bergerak otomatis di AMP

Untuk dapat bergerak otomatis tinggal tambahkan dibagian amp-carousel dengan autoplay delay=”2000″ sehingga menjadi seberti ini.

Delay 2000 artinya slide akan bergeser setelah 2 detik anda bisa mengatur sesuai keinginan slide anda bergerak.

<amp-carousel autoplay delay="2000" width="400" height="300" layout="responsive" type="slides">

<amp-img src="#" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>

<amp-img src="#" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>

<amp-img src="#" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>

</amp-carousel>

dan hasilnya seperti ini :

Nah bagaimana sudah berhasil mencoba script kode yang bergerak otomatis ini ?

Sekarang kita masuk ke script bonus.

Membuat slide teks bergerak di AMP

Jika gambar anda butuh kode amp-image sedangkan teks anda membutuhkan kode div hingga hasilnya seperti ini.

<amp-carousel autoplay delay="2000" height="150" layout="fixed-height" type="slides">

<div><center>"Teks I"</center></div>

<div><center>"Teks II"<center></div>
         
</amp-carousel>

Tambahkan tag div baru untuk membuat teks baru. Dan beginilah hasilnya didalam kode div ini anda bisa bebas mengedit warna atau memberi class dan lainnya.

“Teks I”
“Teks II”
“Teks III”
“Teks IV”

***

Itulah kode AMP Carousel yang dapat anda gunakan di blog amp untuk membuat sebuah slide gambar, teks dan juga video player (Youtube).

Kode ini hanya aktif dan berjalan lancar di blog yang sudah memiliki scema tema AMP jika masih belum total AMP belum bisa digunakan sepenuhnya.

Ada banyak tutorial tentang AMP yang dapat anda coba untuk mengkustomisasi website AMP anda agar lebih menarik beberapa fitur amp lainnya bisa di baca disini Situs Terbaik Belajar Blog AMP untuk Pemula Code / Script / Tutorial


الْحَمْدُ للَّهِ رَبِّ الْعَالَمِيْن


Selalu Berbagi :

Diterbitkan oleh

Rofiq ~

Menulis apa yang saya mau bukan yang anda mau, ada pertanyaan dan hal lain bisa komentar atau kontak Whatsapp di +6289669699740

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *