amp-carousel
Description
Displays multiple similar pieces of content along a horizontal axis.
Required Scripts
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Supported Layouts
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 |
|
Contoh | AMP 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.
<amp-carousel width="450"
height="300">
<amp-img src="/static/inline-examples/images/image1.jpg"
width="450"
height="300"></amp-img>
<amp-img src="/static/inline-examples/images/image2.jpg"
width="450"
height="300"></amp-img>
<amp-img src="/static/inline-examples/images/image3.jpg"
width="450"
height="300"></amp-img>
</amp-carousel>
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.
<amp-carousel id="carousel-with-preview"
width="450"
height="300"
layout="responsive"
type="slides">
<amp-img src="/static/inline-examples/images/image1.jpg"
width="450"
height="300"
layout="responsive"
alt="apples"></amp-img>
<amp-img src="/static/inline-examples/images/image2.jpg"
width="450"
height="300"
layout="responsive"
alt="lemons"></amp-img>
<amp-img src="/static/inline-examples/images/image3.jpg"
width="450"
height="300"
layout="responsive"
alt="blueberries"></amp-img>
</amp-carousel>
<div class="carousel-preview">
<button on="tap:carousel-with-preview.goToSlide(index=0)">
<amp-img src="/static/inline-examples/images/image1.jpg"
width="60"
height="40"
alt="apples"></amp-img>
</button>
<button on="tap:carousel-with-preview.goToSlide(index=1)">
<amp-img src="/static/inline-examples/images/image2.jpg"
width="60"
height="40"
alt="lemons"></amp-img>
</button>
<button on="tap:carousel-with-preview.goToSlide(index=2)">
<amp-img src="/static/inline-examples/images/image3.jpg"
width="60"
height="40"
alt="blueberries"></amp-img>
</button>
</div>
Atribut
type | Menentukan jenis tampilan untuk item carousel, yang dapat berupa:
|
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:
|
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.
|
atribut umum | Elemen 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.
Anda telah membaca dokumen ini belasan kali, tetapi belum semua pertanyaan Anda terjawab? Mungkin orang lain merasakan hal yang sama. Berinteraksilah dengan mereka di Stack Overflow.
Kunjungi Stack Overflow Menemukan bug atau ada fitur yang kurang?Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.
Kunjungi GitHub