AMP
ID
English Deutsch Français العربية Español Italiano 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Important: this documentation is not applicable to your currently selected format stories!

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
  • carousel: fixed, fixed-height, dan nodisplay.
  • slide: fill, fixed, fixed-height, flex-item, nodisplay, dan responsive.
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>
Buka cuplikan ini di playground

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>
Buka cuplikan ini di playground

Atribut

type Menentukan 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. 
<amp-carousel type="slides"
  width="450"
  height="300"
  controls
  loop
  autoplay
  delay="3000"  data-next-button-aria-label="Go to next slide"
  data-previous-button-aria-label="Go to previous slide">
  <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>
Buka cuplikan ini di playground
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.

Perlu bantuan lainnya?

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