Cara Membuat Testimonial Box Switcher menggunakan HTML, CSS, dan JavaScript

 

 Cara Membuat Testimonial Box Switcher menggunakan HTML, CSS, dan JavaScript

---

📌 Create a Testimonial Box Switcher using HTML, CSS & JavaScript

Testimonial box adalah komponen UI yang sering digunakan untuk menampilkan ulasan pengguna secara dinamis. Pada tutorial ini, kita akan membuat testimonial yang berganti otomatis (auto-switch) setiap beberapa detik dengan animasi progress bar.

---

🧩 1. Struktur HTML

HTML digunakan untuk membuat kerangka utama dari testimonial box, seperti teks ulasan, foto pengguna, nama, dan posisi.

<div class="testimonial-container">
  <div class="progress-bar"></div>
  <div class="fas fa-quote-right fa-quote"></div>
  <div class="fas fa-quote-left fa-quote"></div>

  <p class="testimonial">
    Testimonial akan muncul di sini
  </p>

  <div class="user">
    <img src="image.jpg" class="user-image" />
    <div class="user-details">
      <h4 class="username">Nama User</h4>
      <p class="role">Pekerjaan</p>
    </div>
  </div>
</div>

📌 Penjelasan:

• .testimonial → menampilkan isi review

• .user-image → foto user

• .username & .role → identitas user

• .progress-bar → indikator pergantian testimonial

---

🎨 2. Styling dengan CSS

CSS digunakan untuk mempercantik tampilan testimonial agar modern dan responsif.

🔹 Tampilan utama

.testimonial-container {
  background-color: #476ce4;
  color: #fff;
  border-radius: 15px;
  padding: 50px 80px;
  max-width: 768px;
  position: relative;
}

🔹 Progress bar animasi

.progress-bar {
  background-color: #fff;
  height: 4px;
  width: 100%;
  animation: grow 10s linear infinite;
  transform-origin: left;
}

@keyframes grow {
  0% {
    transform: scaleX(0);
  }
}

📌 Fungsi:

• Progress bar akan berjalan selama 10 detik, sesuai dengan interval pergantian testimonial.

---

⚙️ 3. Logika JavaScript

JavaScript berfungsi untuk mengganti testimonial secara otomatis.

🔹 Data testimonial

const testimonials = [
  {
    name: 'Miyah Myles',
    position: 'Marketing',
    photo: 'image-url',
    text: 'Testimonial text...'
  },
  ...
]

🔹 Fungsi update

function updateTestimonial() {
  const { name, position, photo, text } = testimonials[idx]

  testimonial.innerHTML = text
  userImage.src = photo
  username.innerHTML = name
  role.innerHTML = position

  idx++

  if (idx > testimonials.length - 1) {
    idx = 0
  }
}

🔹 Auto switch

setInterval(updateTestimonial, 10000)

📌 Penjelasan:

• setInterval() menjalankan fungsi setiap 10 detik

• Index (idx) akan looping kembali ke awal setelah data habis

---

⚠️ 4. Perbaikan Bug pada Kode

Pada kode yang kamu berikan, terdapat typo kecil:

const testimonialsContainer = document.querySelector('.testimonials-container')

❌ Salah: .testimonials-container
✅ Benar: .testimonial-container

const testimonialsContainer = document.querySelector('.testimonial-container')

---

✨ 5. Fitur yang Didapat

Dengan project ini, kamu sudah memiliki:

✅ Testimonial otomatis berganti
✅ Animasi progress bar
✅ UI modern dan responsif
✅ Data dinamis dari JavaScript

---

🚀 6. Pengembangan Lanjutan

Kamu bisa meningkatkan fitur ini dengan:

• Tombol Next / Previous

• Pause saat hover

• Animasi fade-in/out

• Integrasi API (testimonial dari server)

---

🎯 Kesimpulan

Testimonial Box Switcher ini adalah contoh sederhana namun powerful untuk:

• Belajar DOM manipulation

• Mengelola data array di JavaScript

• Membuat UI interaktif tanpa library tambahan

Dengan kombinasi HTML, CSS, dan JavaScript, kamu bisa membuat komponen website yang terlihat profesional dan dinamis.

---