ImagesLesson 96Preview gratis
Image Comparison Slider
Lesson ini bagian dari How To · Semua level
Ringkasan
Image comparison slider memungkinkan pengguna membandingkan dua gambar dengan menggeser sebuah pengatur ke kiri dan ke kanan. Satu gambar ditampilkan penuh sebagai dasar, sedangkan gambar kedua dipotong sesuai posisi slider. Teknik ini sering dipakai untuk menunjukkan hasil edit foto, renovasi, atau perbedaan dua versi desain.
Poin kunci
- Dua gambar ditumpuk pada posisi yang sama di dalam wadah berposition: relative.
- Gambar pembanding dipotong menggunakan clip-path atau lebar yang dikendalikan.
- Input type=range memberi nilai posisi slider dalam persen.
- Event input memperbarui potongan gambar dan posisi garis pemisah secara langsung.
- Wadah memakai overflow: hidden agar bagian gambar tidak keluar dari batas.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.