htmlcssjavascriptgalerikomponenMenengah11 mnt baca

Slider Carousel Gambar

Galeri geser dengan tombol prev/next, dot indikator, dan autoplay.

Carousel adalah "komidi putar" gambar: satu bingkai menampilkan satu gambar, bisa digeser ke gambar berikutnya. Dipakai di banner promo e-commerce dan hero section company profile.

Langkah Membangun

HTML: <div class="carousel"> berisi <div class="track"> (rel berisi semua slide <img>), tombol prev/next, dan dot indikator.

CSS: Triknya: track memakai display: flex dengan lebar tiap slide 100 persen dari bingkai, dan bingkai punya overflow: hidden. Menggeser = mengubah transform: translateX(-indeks * 100%) pada track dengan transisi. Dot aktif punya warna berbeda.

JS: Variabel indeks menyimpan slide aktif. Fungsi keSlide(i):

  1. Normalisasi indeks (jika lewat terakhir, kembali ke 0: efek loop).
  2. Set transform track.
  3. Update dot aktif. Tombol prev/next menambah/mengurangi indeks. Autoplay: setInterval tiap 4 detik, tapi hentikan sementara saat mouse hover (agar pengguna bisa melihat dengan tenang) dan reset timer setelah klik manual.

Kesalahan Umum

  • Gambar beda ukuran membuat tinggi carousel lompat-lompat (paksa aspect-ratio sama).
  • Autoplay tidak berhenti saat tab browser tidak aktif (tidak masalah besar, tapi bisa pakai Page Visibility API).
  • Indeks negatif saat klik prev di slide pertama (tangani dengan modulo atau if).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Geser Sentuh (Swipe)

Tambahkan dukungan swipe di HP: geser kiri untuk slide berikutnya, geser kanan untuk sebelumnya. Pakai event touchstart dan touchend, hitung selisih posisi X.