Membuat Slider atau Carousel Gambar dengan JavaScript

Slider gambar atau carousel gambar adalah tampilan bergulir otomatis yang menampilkan beberapa gambar satu per satu. Fitur ini sering digunakan di halaman beranda website, seperti banner promosi toko online atau galeri foto portofolio. Dengan JavaScript, kamu dapat membuat slider yang otomatis berganti gambar atau dapat digeser manual menggunakan tombol panah.

Struktur HTML Dasar Slider

Berikut struktur sederhana slider gambar:

<div class="slider">
  <img src="img1.jpg" class="slide active">
  <img src="img2.jpg" class="slide">
  <img src="img3.jpg" class="slide">

  <button class="prev">❮</button>
  <button class="next">❯</button>
</div>

CSS untuk Tampilan Slider

Tambahkan gaya agar slider tampil rapi dan responsif:

.slider {
  position: relative;
  width: 80%;
  max-width: 600px;
  margin: 50px auto;
  overflow: hidden;
  border-radius: 10px;
}

.slide {
  display: none;
  width: 100%;
}

.slide.active {
  display: block;
}

button.prev, button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

button.prev { left: 10px; }
button.next { right: 10px; }

button:hover {
  background: rgba(0,0,0,0.8);
}

JavaScript: Logika Pergantian Gambar

Berikut script untuk menampilkan gambar berikutnya dan sebelumnya:

const slides = document.querySelectorAll(".slide");
const prev = document.querySelector(".prev");
const next = document.querySelector(".next");

let index = 0;

function showSlide(i) {
  slides.forEach(slide => slide.classList.remove("active"));
  slides[i].classList.add("active");
}

next.addEventListener("click", () => {
  index = (index + 1) % slides.length;
  showSlide(index);
});

prev.addEventListener("click", () => {
  index = (index - 1 + slides.length) % slides.length;
  showSlide(index);
});

Penjelasan:

Gambar disembunyikan dengan display: none.
Hanya gambar yang aktif (.active) yang ditampilkan.
Tombol next dan prev mengubah index dan memanggil showSlide().

Menambahkan Fitur Otomatis (Auto Slide)

Ingin slider berganti otomatis setiap beberapa detik? Tambahkan kode berikut di bawah event listener:

setInterval(() => {
  index = (index + 1) % slides.length;
  showSlide(index);
}, 3000); // Ganti setiap 3 detik

Sekarang slider akan otomatis berpindah gambar secara berkala.

Studi Kasus: Slider Produk atau Banner Promosi

Kamu bisa mengubah slider ini menjadi banner promosi toko online atau galeri produk unggulan.

Contoh:

<div class="slider">
  <img src="produk1.jpg" class="slide active" alt="Produk 1">
  <img src="produk2.jpg" class="slide" alt="Produk 2">
  <img src="produk3.jpg" class="slide" alt="Produk 3">

  <button class="prev">❮</button>
  <button class="next">❯</button>
</div>

Tambahkan teks promo atau tombol “Beli Sekarang” di atas gambar untuk membuatnya lebih interaktif.

Kesimpulan

Dengan JavaScript murni, kamu bisa membuat slider gambar sederhana yang responsif dan menarik tanpa perlu library seperti jQuery atau plugin tambahan. Fitur ini bisa dikembangkan lebih lanjut, misalnya:

Menambahkan indikator titik (dot navigation)
Menambahkan animasi transisi (fade/slide)
Membuat pause saat hover

Slider semacam ini adalah dasar yang kuat untuk membangun pengalaman visual yang dinamis di website modern.