ImagesLesson 58Preview gratis
Slideshow Gallery
Lesson ini bagian dari How To · Semua level
Ringkasan
Slideshow gallery memadukan gambar utama yang besar dengan deretan thumbnail di bawahnya. Ketika thumbnail diklik, gambar utama berganti dan thumbnail tersebut ditandai aktif. Pola ini memberi pengguna gambaran cepat sekaligus kendali untuk memilih foto tertentu.
Poin kunci
- Thumbnail bertindak sebagai tombol pemilih gambar utama.
- Kelas .active pada thumbnail menunjukkan pilihan yang sedang tampil.
- Atribut src gambar utama diperbarui melalui JavaScript.
- object-fit: cover menjaga rasio gambar utama tanpa distorsi.
- opacity dan outline membantu membedakan thumbnail aktif dari yang lain.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.