Daftar isi

Menambahkan korsel

Fitur umum lainnya di halaman seluler adalah korsel (carousel). Anda dapat dengan mudah menambahkan korsel ke halaman AMP dengan menggunakan komponen amp-carousel. Mari kita mulai dengan contoh sederhana, misalnya korsel gambar.

Korsel gambar sederhana

Jangan lupa untuk menyertakan perpustakaan komponen amp-carousel dengan menambahkan permintaan JavaScript berikut ini ke tag <head> pada dokumen Anda:

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

Berikutnya, mari sematkan korsel gambar yang sederhana dengan tata letak responsif serta lebar dan tinggi yang sudah ditentukan sebelumnya. Tambahkan kode berikut ini ke halaman Anda:

<amp-carousel layout="fixed-height" height="168" type="carousel">
  <amp-img src="mountains-1.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168"></amp-img>
</amp-carousel>

Segarkan halaman, maka Anda akan melihat korsel:

Korsel gambar sederhana

Komponen amp-carousel dapat dikonfigurasikan dalam berbagai cara. Mari kita ubah UI agar hanya menampilkan gambar satu per satu dan membuat tata letak korsel menjadi responsif.

Untuk melakukannya, pertama-tama, ubah type amp-carousel dari carousel menjadi slides, ubah layout menjadi responsive dan tetapkan width ke 300 (pastikan height dan width sudah ditentukan). Tambahkan atribut "layout=responsive" ke amp-img anak amp-carousel.

Muat ulang halaman. Kini, Anda akan melihat elemen satu per satu, bukannya daftar elemen yang dapat di-scroll secara berulang. Coba usap secara horizontal untuk berpindah antar-elemen. Jika Anda mengusap elemen ketiga, Anda tidak akan dapat mengusap lebih jauh lagi.

Berikutnya, tambahkan atribut loop. Segarkan halaman dan coba segra usap ke kiri. Korsel akan terus mengalami pengulangan.

Terakhir, mari buat korsel ini agar otomatis berputar setiap 2 detik. Tambahkan atribut autoplay dan atribut delay dengan nilai 2000 (cth.: delay="2000") ke amp-carousel.

Hasil akhirnya akan terlihat seperti berikut ini:

<amp-carousel
  layout="responsive"
  width="300"
  height="168"
  type="slides"
  autoplay
  delay="2000"
  loop
>
  <amp-img
    src="mountains-1.jpg"
    width="300"
    height="168"
    layout="responsive"
  ></amp-img>
  <amp-img
    src="mountains-2.jpg"
    width="300"
    height="168"
    layout="responsive"
  ></amp-img>
  <amp-img
    src="mountains-3.jpg"
    width="300"
    height="168"
    layout="responsive"
  ></amp-img>
</amp-carousel>

Segarkan halaman dan cobalah!

CATATAN – Anda mungkin telah mengetahui bahwa ketika amp-carousel memiliki jenis carousel, kita menggunakan jenis layout fixed-height. Jenis tata letak yang didukung untuk jenis carousel terbatas; contohnya: jenis carousel tidak mendukung tata letak responsive. Sesuai dengan namanya, elemen tinggi tetap mengambil ruang yang tersedia bagi mereka, tetapi menjaga tinggi tidak berubah. Untuk elemen tinggi tetap, Anda harus menentukan atribut height, sedangkan atribut width harus auto atau tidak ditetapkan.

Konten korsel campuran

Korsel gambar sudah bagus, namun bagaimana cara untuk memunculkan konten yang lebih rumit di korsel? Mari kita coba mencampurkan berbagai hal sedikit demi sedikit dengan menempatkan iklan, beberapa teks, serta gambar dalam satu korsel. Dapatkah amp-carousel menangani campuran semacam ini sekaligus? Tentu saja!

Pertama, mari tambahkan gaya ini ke <style amp-custom> untuk memastikan bahwa komponen amp-fit-text dan amp-carousel dapat bekerja sama dengan aman:

amp-fit-text {
  white-space: normal;
}

Sekarang, ganti korsel sederhana Anda dengan ini:

<amp-carousel layout="fixed-height" height="250" type="carousel">
  <amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img>

  <amp-ad
    width="300"
    height="250"
    type="doubleclick"
    data-slot="/35096353/amptesting/image/static"
  >
    <div placeholder>This ad is still loading.</div>
  </amp-ad>

  <amp-fit-text width="300" height="250" layout="fixed">
    Big, bold article quote goes here.
  </amp-fit-text>
</amp-carousel>

Segarkan halaman, maka seharusnya tampak seperti ini:

Korsel konten campuran

Untuk mempelajari lebih lanjut, lihat dokumentasi referensi komponen amp-carousel.

CATATAN – Dalam contoh terakhir kita, Anda mungkin telah menegtahui komponen amp-ad menyertakan elemen div anak dengan atribut placeholder. Di awal tutorial ini, ada skenario serupa dengan amp-ad yang menggunakan fallback. Apa perbedaan antara bakal tempat (placeholder) dan fallback? Elemen Fallback muncul ketika elemen induk gagal dimuat, yaitu jika tidak ada iklan yang tersedia. Elemen placeholder muncul menggantikan elemen induk, saat sedang dimuat. Dalam arti tertentu, elemen-elemen ini mengakhiri proses pemuatan elemen induk. Anda dapat mempelajari lebih lanjut dalam panduan Bakal tempat & fallback.

Bab sebelumnya Bab selanjutnya