Automatic Image Carousel Html

MUAZHAN

4 min read

·

Jul 03, 2024

29

Share

Membangun Automatic Image Carousel dengan HTML, CSS, dan JavaScript

Carousel gambar merupakan komponen web yang populer, memungkinkan tampilan gambar secara bergantian dalam area yang sama. Untuk membuat carousel gambar yang berjalan otomatis, kita membutuhkan kombinasi dari HTML untuk struktur, CSS untuk styling, dan JavaScript untuk fungsionalitas. Berikut adalah langkah-langkahnya:

1. Struktur HTML

Kode HTML di atas membentuk struktur dasar carousel.

• carousel-container: Elemen pembungkus yang mengatur lebar dan tinggi carousel.
• carousel-track: Elemen yang berisi semua gambar yang akan ditampilkan.
• carousel-item: Elemen untuk setiap gambar dalam carousel.

2. Styling CSS

.carousel-container {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.carousel-item {
  width: 500px;
  height: 300px;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Gaya CSS di atas mengatur tampilan carousel:

• carousel-container: Menentukan ukuran, menyembunyikan overflow, dan mengizinkan positioning absolut.
• carousel-track: Mengatur display flex untuk pengaturan gambar secara berdampingan, menambahkan transisi untuk efek slide, dan mengatur positioning absolut.
• carousel-item: Menentukan ukuran setiap gambar.
• carousel-item img: Mengatur agar gambar mengisi seluruh area elemen 'carousel-item'.

3. Logika JavaScript

const carouselTrack = document.querySelector('.carousel-track');
const carouselItems = document.querySelectorAll('.carousel-item');

let currentIndex = 0;

function moveToNextItem() {
  currentIndex = (currentIndex + 1) % carouselItems.length;
  const translateX = -currentIndex * 500; // Menyesuaikan nilai dengan lebar carousel-item
  carouselTrack.style.transform = `translateX(${translateX}px)`;
}

setInterval(moveToNextItem, 3000); // Mengatur waktu transisi ke gambar berikutnya (3 detik)

Kode JavaScript di atas mengontrol pergerakan carousel:

• carouselTrack: Menyeleksi elemen 'carousel-track'.
• carouselItems: Menyeleksi semua elemen 'carousel-item'.
• currentIndex: Menyimpan indeks gambar yang sedang aktif.
• moveToNextItem(): Fungsi yang memindahkan carousel ke gambar berikutnya.
• setInterval(): Melakukan pemanggilan fungsi moveToNextItem setiap 3000 milidetik (3 detik).

Menjalankan Carousel

Setelah Anda membuat file HTML, CSS, dan JavaScript, Anda dapat membuka file HTML di browser untuk melihat carousel gambar otomatis yang telah Anda buat. Anda dapat menyesuaikan gambar, waktu transisi, dan gaya sesuai kebutuhan Anda.