Automatic Image Slider In Html Css Free Download

MUAZHAN

5 min read

·

Jul 03, 2024

48

Share

Cara Membuat Automatic Image Slider dengan HTML dan CSS

Artikel ini akan memandu Anda dalam membuat automatic image slider yang sederhana menggunakan HTML dan CSS. Slider ini akan menampilkan serangkaian gambar secara bergantian dengan efek transisi yang halus.

Langkah 1: Struktur HTML

Pertama, kita akan membuat struktur HTML untuk slider. Kita akan menggunakan elemen div untuk wadah slider, ul untuk daftar gambar, dan li untuk setiap gambar.

Langkah 2: Styling CSS

Selanjutnya, kita akan menambahkan styling CSS untuk mengatur tampilan slider dan efek transisi.

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slider ul {
  display: flex;
  transition: transform 0.5s ease-in-out;
  list-style: none;
  padding: 0;
  margin: 0;
}

.slider li {
  width: 500px;
  height: 300px;
}

.slider li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Kode CSS ini akan:

• Menetapkan lebar dan tinggi untuk wadah slider.
• Mengatur properti overflow: hidden untuk menyembunyikan konten yang melebihi batas wadah.
• Mengatur properti position: relative untuk memposisikan elemen anak di dalam wadah.
• Mengatur display: flex untuk mengatur gambar secara horizontal.
• Menambahkan transisi untuk efek perubahan gambar yang halus.
• Mengatur lebar dan tinggi untuk setiap gambar.
• Mengatur object-fit: cover untuk memastikan gambar menutupi seluruh area gambar.

Langkah 3: Menambahkan JavaScript (Optional)

Untuk membuat slider otomatis, kita perlu menambahkan beberapa JavaScript. Kita akan menggunakan fungsi setInterval untuk mengubah gambar secara berkala.

const slider = document.querySelector('.slider');
const sliderImages = document.querySelectorAll('.slider li');
let currentIndex = 0;

function nextImage() {
  currentIndex = (currentIndex + 1) % sliderImages.length;
  const translateX = -currentIndex * 500; // Lebar gambar
  slider.style.transform = `translateX(${translateX}px)`;
}

setInterval(nextImage, 3000); // Ubah gambar setiap 3 detik

Kode JavaScript ini akan:

• Memilih elemen slider dan gambar.
• Menentukan indeks gambar saat ini.
• Mengatur fungsi nextImage untuk mengubah gambar dan menggeser gambar ke gambar berikutnya.
• Menggunakan setInterval untuk menjalankan fungsi nextImage secara berkala, sehingga gambar akan berubah secara otomatis.

Penjelasan Kode:

• currentIndex = (currentIndex + 1) % sliderImages.length: baris kode ini digunakan untuk menunjuk ke gambar berikutnya. Operasi modulo % akan mengatur currentIndex kembali ke 0 setelah mencapai akhir array gambar.
• const translateX = -currentIndex * 500: baris kode ini digunakan untuk menghitung jumlah pergeseran horizontal yang diperlukan untuk menampilkan gambar berikutnya.
• slider.style.transform = translateX(${translateX}px)`: baris kode ini mengaplikasikan transformasi translasi ke elemen slider, sehingga menggeser gambar ke gambar berikutnya.
• setInterval(nextImage, 3000): baris kode ini menjalankan fungsi nextImage setiap 3000 milidetik (3 detik).

Kesimpulan

Dengan menggabungkan HTML, CSS, dan JavaScript sederhana, Anda telah berhasil membuat automatic image slider yang menarik. Anda dapat menyesuaikan kode ini dengan menambahkan lebih banyak gambar, mengubah durasi animasi, dan bahkan menambahkan tombol navigasi untuk mengontrol slider secara manual.