Carousel

Anatomi

Komponen Banner Carousel terdiri dari beberapa elemen kunci:

Container utama

Wadah yang menampung seluruh isi carousel.

Konten Slide/banner

Elemen inti yang menampilkan konten visual, dapat berupa gambar, teks, tombol CTA (Call to Action), atau kombinasi.

Indikator

• Pagination indicator (dot/number): menunjukkan posisi slide saat ini dan memungkinkan navigasi langsung ke slide tertentu.
• Autoplay indicator (opsional)
  Penanda atau progress bar untuk menunjukkan durasi slide saat ini.

Navigasi

• Arrow control (prev/next): memungkinkan pengguna berpindah antar slide dengan berinteraksi dengan komponen tombol.
• Tidak ditampilkan: pengguna dapat berpindah antar slide tanpa melalui perantara komponen, seperti swipe atau tap konten langsung.

Jenis dan variasi

Basic Carousel

Carousel dengan navigasi panah kiri-kanan dan pergantian manual antar banner.

Carousel with Pagination

Menyediakan dot atau angka sebagai indikator posisi slide sekaligus kontrol navigasi.

Custom Carousel

Carousel dengan konten komponen custom. Banner bisa dilengkapi teks deskriptif, judul, dan tombol CTA untuk interaksi lebih lanjut.

Behaviors

Navigasi menggunakan keyboard

Carousel harus dapat diakses menggunakan keyboard.

• Tombol Tab untuk berpindah fokus ke navigasi atau slide.
• Tombol Arrow Left/Right untuk berpindah antar slide.
• Indikator fokus (misalnya outline biru) akan muncul saat elemen aktif.
  focus

Autoplay & Pause

• Autoplay aktif secara default (opsional, tergantung konteks).
• Jika pengguna berinteraksi (hover, fokus, atau navigasi manual), autoplay berhenti untuk menghindari gangguan.

Responsiveness

Banner Carousel harus menyesuaikan ukuran layar. Pada perangkat mobile, navigasi dapat berupa swipe/drag gesture.

Satu slide aktif pada satu waktu

Hanya satu banner yang ditampilkan pada satu waktu untuk menjaga fokus konten.

Panduan penggunaan

Gunakan untuk konten prioritas tinggi

Banner Carousel efektif untuk menyoroti promosi, pengumuman, atau highlight utama. Hindari menampilkan terlalu banyak slide agar pesan tidak hilang.
container

Batasi jumlah slide

Disarankan jumlah slide maksimal 5–7 untuk menghindari overload informasi dan memastikan tiap pesan tersampaikan.

Aksesibilitas

Untuk memastikan Banner Carousel dapat diakses oleh semua pengguna, termasuk mereka yang menggunakan teknologi bantu:

• Keyboard navigation: pastikan semua kontrol (panah, pagination, tombol CTA) dapat diakses dengan Tab, Enter, dan Arrow keys.
• Screen reader support: gunakan atribut aria-live="polite" untuk memberi tahu pengguna saat slide berubah.
• Alt text: semua gambar harus memiliki deskripsi alternatif yang relevan.
• Pause control: berikan opsi untuk menghentikan autoplay agar pengguna dapat membaca konten dengan nyaman.
• Fokus yang jelas: saat kontrol carousel mendapatkan fokus, tampilkan indikator visual (outline).

Responsif

Banner Carousel harus fleksibel dan berfungsi optimal pada berbagai ukuran layar:

• Desktop: tampilkan navigasi panah, pagination, dan konten lengkap (gambar + teks + CTA).
• Mobile: gunakan swipe/drag gesture untuk navigasi, navigasi panah dapat diganti atau diperkecil.
• Optimasi performa: gunakan gambar responsif (misalnya srcset atau ukuran adaptif) agar loading lebih cepat di perangkat mobile.
• Skalabilitas teks: pastikan teks di dalam banner tetap terbaca dengan baik ketika pengguna memperbesar layar (zoom).