ImagesLesson 64Preview gratis
Scrollable Image Gallery
Lesson ini bagian dari How To · Semua level
Ringkasan
Scrollable image gallery menampilkan gambar dalam satu baris horizontal yang dapat digeser. overflow-x: auto memunculkan scrollbar hanya saat konten melebihi lebar kontainer. Scroll snap membuat gambar berhenti di posisi yang rapi, sehingga galeri terasa seperti carousel sederhana.
Poin kunci
- overflow-x: auto memungkinkan gulir horizontal saat konten terlalu lebar.
- flex: 0 0 240px mencegah gambar menyusut dan menetapkan lebar tetap.
- scroll-snap-type dan scroll-snap-align membuat posisi berhenti lebih presisi.
- scroll-behavior: smooth memberi animasi halus saat tombol navigasi dipakai.
- Tombol scrollBy dapat menggeser galeri tanpa scrollbar.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.