Membuat Carousel dengan HTML, CSS, dan JavaScript

Berikut adalah panduan untuk membuat carousel gambar yang responsif dan interaktif hanya dengan menggunakan HTML murni, CSS, dan JavaScript tanpa library eksternal.
1.Buat Struktur Dasar (HTML):Menyiapkan kerangka dan elemen gambar.Pertama, buat sebuah wadah utama (container) yang akan menampung lintasan gambar (track) dan tombol navigasi. Ganti src pada tag img dengan URL gambar Anda.

<div class="carousel-container">
  <div class="carousel-track">
    <div class="carousel-slide">
      <img src="https://via.placeholder.com/800x400?text=Gambar+1" alt="Gambar 1">
    </div>
    <div class="carousel-slide">
      <img src="https://via.placeholder.com/800x400?text=Gambar+2" alt="Gambar 2">
    </div>
    <div class="carousel-slide">
      <img src="https://via.placeholder.com/800x400?text=Gambar+3" alt="Gambar 3">
    </div>
  </div>
  
  <!-- Tombol Navigasi -->
  <button class="carousel-btn prev-btn">&#10094;</button>
  <button class="carousel-btn next-btn">&#10095;</button>
</div>

2.Desain Tampilan (CSS):Mengatur tata letak dan animasi transisi.Kita menggunakan Flexbox agar gambar berjajar menyamping secara horizontal. Properti overflow: hidden pada container berfungsi menyembunyikan gambar yang tidak sedang aktif.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.carousel-container {
  position: relative;
  width: 80%;
  max-width: 800px;
  margin: 40px auto;
  overflow: hidden; /* Menyembunyikan gambar lain */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out; /* Animasi geser */
}

.carousel-slide {
  min-width: 100%; /* Setiap slide memakan 100% lebar wadah */
}

.carousel-slide img {
  width: 100%;
  display: block;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 15px;
  cursor: pointer;
  font-size: 20px;
  border-radius: 5px;
  transition: background 0.3s;
}

.carousel-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.prev-btn { left: 10px; }
.next-btn { right: 10px; }

3.Buat Fungsionalitas Geser (JavaScript):Menggerakkan track saat tombol diklik.Script ini akan melacak indeks gambar yang sedang aktif (dimulai dari 0). Saat tombol diklik, indeks berubah, dan properti CSS transform: translateX() digunakan untuk menggeser gambar.

// Memilih elemen dari DOM
const track = document.querySelector('.carousel-track');
const slides = Array.from(track.children);
const nextButton = document.querySelector('.next-btn');
const prevButton = document.querySelector('.prev-btn');

let currentIndex = 0;

// Fungsi utama untuk menggeser carousel
function updateCarousel(index) {
  // Menggeser track sejauh (index * 100%) ke kiri
  track.style.transform = `translateX(-${index * 100}%)`;
}

// Event listener untuk tombol "Next"
nextButton.addEventListener('click', () => {
  // Jika di gambar terakhir, kembali ke awal. Jika tidak, lanjut ke gambar berikutnya.
  currentIndex = (currentIndex === slides.length - 1) ? 0 : currentIndex + 1;
  updateCarousel(currentIndex);
});

// Event listener untuk tombol "Prev"
prevButton.addEventListener('click', () => {
  // Jika di gambar pertama, pergi ke gambar terakhir. Jika tidak, mundur satu gambar.
  currentIndex = (currentIndex === 0) ? slides.length - 1 : currentIndex - 1;
  updateCarousel(currentIndex);
});

Setelah carousel dasar Anda berfungsi, kita bisa menambahkan beberapa fitur lanjutan: