AMP

amp-carousel

Carousel generik untuk menampilkan beberapa konten serupa secara bergantian sepanjang sumbu horizontal; yang dimaksudkan untuk memiliki fleksibilitas dan performa tinggi.

Skrip yang Diperlukan<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Tata Letak yang Didukung
  • carousel: fixed, fixed-height, dan nodisplay.
  • slide: fill, fixed, fixed-height, flex-item, nodisplay, dan responsive.
ContohAMP By Example:

Perilaku

Setiap turunan langsung komponen amp-carousel dianggap sebagai item dalam carousel. Masing-masing node ini mungkin juga memiliki sembarang turunan HTML.

Carousel terdiri dari sejumlah item, juga panah navigasi opsional untuk maju atau mundur satu item.

Carousel berpindah-pindah item jika pengguna menggeser, menggunakan tombol panah, atau mengklik panah navigasi opsional.

Tampilkan kode lengkap

Berpindah ke slide tertentu

Apabila metode untuk atribut on pada suatu elemen ditetapkan ke tap:carousel-id.goToSlide(index=N), saat pengguna menge-tap atau mengklik, carousel dengan ID "carousel-id" akan menuju ke slide yang berada pada index=N (slide pertama berada pada index=0, slide kedua berada pada index=1, dan seterusnya).

Pada contoh berikut, terdapat carousel tiga gambar dengan tombol pratinjau di bawah carousel. Saat pengguna mengklik salah satu tombol, item carousel yang terkait akan ditampilkan.

Tampilkan kode lengkap

Atribut

typeMenentukan jenis tampilan untuk item carousel, yang dapat berupa:
  • carousel (default): Semua slide ditampilkan dan dapat di-scroll secara horizontal. Jenis ini hanya mendukung tata letak berikut: fixed, fixed-height dan nodisplay.
  • slides : Menampilkan slide per satu. Jenis ini mendukung tata letak berikut: fill, fixed, fixed-height, flex-item, nodisplay, dan responsive.
height (wajib)Menentukan tinggi carousel, dalam piksel.
controls (opsional)Menampilkan panah kiri dan kanan secara permanen agar pengguna dapat menavigasi item carousel di perangkat seluler. Pada perangkat seluler, secara default panah navigasi akan menghilang setelah beberapa detik. Visibilitas panah juga dapat dikontrol melalui penataan gaya, dan kueri media dapat digunakan untuk hanya menampilkan panah pada lebar layar tertentu. Pada perangkat desktop, panah selalu ditampilkan kecuali jika hanya ada satu turunan.
data-next-button-aria-label (opsional)Menetapkan aria-label untuk amp-carousel-button-next. Jika tidak ada nilai yang ditentukan, aria-label akan didefaultkan ke 'Item berikutnya dalam carousel'.
data-prev-button-aria-label (opsional)Menetapkan aria-label untuk amp-carousel-button-prev. Jika tidak ada nilai yang ditentukan, aria-label akan didefaultkan ke 'Item sebelumnya dalam carousel'.
data-button-count-format (opsional)String format yang terlihat seperti (%s of %s), digunakan sebagai akhiran aria-label untuk amp-carousel-button-next/amp-carousel-button-prev. Nilai ini memberikan informasi kepada pengguna pembaca layar tentang progres mereka dalam carousel. Jika tidak ada nilai yang ditentukan, atribut ini akan didefaultkan ke '(%s dari %s)'.
autoplay (opsional)Memindahkan slide ke slide berikutnya tanpa interaksi pengguna.
Jika atribut ini ada tanpa nilai:
  • Secara default, slide berpindah dalam interval 5000 milidetik (5 detik); nilai ini dapat diganti dengan atribut delay.
  • Atribut loop ditambahkan ke amp-carousel jika loop belum ada.
  • Perlu setidaknya 2 slide agar autoplay dapat berjalan.
  • Hanya berlaku untuk carousel dengan type=slides.
Jika atribut ini ada dengan nilai:
  • Atribut loop ditambahkan keamp-carousel jika loop belum ada.
  • Atribut loop dihapus setelah jumlah loop yang diperlukan dilakukan.
delay (opsional)Menentukan durasi (dalam milidetik) untuk menunda perpindahan ke slide berikutnya saat autoplay diaktifkan. Atribut delay hanya berlaku untuk carousel dengan type=slides.
loop (opsional)Memungkinkan pengguna berpindah melewati item pertama atau item akhir. Harus ada minimal 3 slide agar loop dapat dilakukan. Atribut loop hanya berlaku untuk carousel dengan type=slides. Contoh: Menampilkan carousel slide dengan kontrol, loop, dan autoplay tertunda.
Tampilkan kode lengkap
atribut umumElemen ini mencakup atribut umum yang diperluas ke komponen AMP.

Penataan gaya

  • Anda dapat menggunakan pemilih elemen amp-carousel untuk menata gayanya dengan bebas.
  • Anda dapat menggunakan pemilih class .amp-carousel-slide untuk menargetkan item carousel.
  • Status visual tombol amp-carousel saat nonaktif disembunyikan.
  • Secara default, .amp-carousel-button menggunakan SVG inline sebagai gambar latar tombol. Anda dapat menggantinya dengan SVG atau gambar Anda sendiri seperti pada contoh di bawah ini.

Contoh: SVG inline .amp-carousel-button default

.amp-carousel-button-prev {
  left: 16px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z" fill="#fff" /></svg>');
}

Contoh: Mengganti SVG inline .amp-carousel-button default

.amp-carousel-button-prev {
  left: 5%;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M11.56 5.56L10.5 4.5 6 9l4.5 4.5 1.06-1.06L8.12 9z" fill="#fff" /></svg>');
}

Validasi

Lihat aturan amp-carousel dalam spesifikasi validator AMP.

Perlu bantuan lainnya?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub