Slider Testimoni

Kenapa Testimoni?

Testimoni adalah "bukti sosial": calon pembeli lebih percaya kata pelanggan lain daripada iklanmu. Slider testimoni menampilkan banyak ulasan dalam ruang kecil, dan pola ini dipakai di hampir semua landing page.

Langkah Membangun

HTML: Kontainer slider berisi kartu testimoni: foto profil (lingkaran), nama, jabatan, rating bintang, dan teks ulasan. Tombol prev/next dan dot indikator seperti carousel.

CSS: Kartu testimoni tampil satu per satu dengan efek fade/slide. Foto profil memakai border-radius: 50% dan border berwarna. Tanda kutip besar sebagai dekorasi.

JS: Logika mirip carousel gambar, tapi yang digeser adalah kartu testimoni. Data testimoni disimpan sebagai array object di JS lalu di-render dinamis, sehingga menambah testimoni baru cukup menambah satu object.

Data-Driven Rendering

Alih-alih menulis 5 kartu di HTML, tulis datanya sekali di JS dan render otomatis. Ini pola penting: saat data berasal dari API nanti, caranya sama persis, hanya sumber datanya yang berubah.

Kesalahan Umum

• Foto profil tidak bulat sempurna (pastikan width = height + border-radius 50%).
• Teks testimoni terlalu panjang hingga kartu tidak konsisten tingginya (batasi 2-3 kalimat atau samakan min-height).
• Autoplay terlalu cepat sehingga tidak sempat dibaca (minimal 5 detik per slide).