Latihan 1: Scroll Snap — CSS
Latihan 1 dari materi Scroll Snap di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Galeri ini sudah bisa digeser ke samping. Bikin tiap geseran berhenti tepat di awal slide:
- Di aturan
.gallery { }, tambahkan scroll-snap-type: x mandatory;
- Di aturan
.slide { }, tambahkan scroll-snap-align: start;
x artinya geser ke samping, start artinya tepi kiri slide yang nempel.
Hint
- Snap butuh dua bagian: kotak yang di-scroll menyalakan snap, dan tiap slide menentukan titik nempelnya.
- Kotak yang di-scroll (.gallery) pakai scroll-snap-type, tiap slide (.slide) pakai scroll-snap-align.
- Tambahkan scroll-snap-type: x mandatory; di aturan .gallery, lalu scroll-snap-align: start; di aturan .slide.
