Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

Cara Membuat Slider Gambar Sederhana dengan JavaScript

Cara Membuat Slider Gambar Sederhana dengan JavaScript

Slider gambar adalah salah satu fitur yang sering digunakan di dalam website. Dalam artikel ini, kami akan memberikan contoh kode JavaScript untuk membuat slider gambar sederhana yang bisa Anda gunakan di website Anda.

HTML:

<div class="slider">

  <img src="gambar1.jpg">

  <img src="gambar2.jpg">

  <img src="gambar3.jpg">

</div>

CSS:

.slider {

  width: 500px;

  height: 300px;

  overflow: hidden;

}

.slider img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.3s ease-in-out;

}

Kode di atas menunjukkan tampilan HTML dan CSS untuk slider gambar yang akan kita buat. Di dalam elemen div dengan kelas slider, kita menambahkan beberapa elemen img dengan sumber gambar yang berbeda-beda.

Selanjutnya, kita akan menambahkan kode JavaScript untuk membuat slider bergerak otomatis:

javascript:

const slider = document.querySelector(".slider");

const images = document.querySelectorAll(".slider img");

let counter = 1;

const size = images[0].clientWidth;

slider.style.transform = `translateX(${-size * counter}px)`;

setInterval(() => {

  if (counter >= images.length - 1) return;

  counter++;

  slider.style.transition = "transform 0.3s ease-in-out";

  slider.style.transform = `translateX(${-size * counter}px)`;

}, 3000);

Kode di atas akan membuat slider bergerak secara otomatis setiap 3 detik sekali. counter digunakan untuk mengetahui gambar mana yang sedang ditampilkan. Setiap kali slider bergerak, counter akan diincrement dan slider akan berpindah ke gambar selanjutnya dengan animasi perpindahan selama 0.3 detik.

Terakhir, kita akan menambahkan beberapa kode lagi untuk membuat slider bisa bergerak secara tak terbatas:

javascript:

slider.addEventListener("transitionend", () => {

  if (images[counter].id === "last-clone") {

    slider.style.transition = "none";

    counter = images.length - 2;

    slider.style.transform = `translateX(${-size * counter}px)`;

  }

  if (images[counter].id === "first-clone") {

    slider.style.transition = "none";

    counter = images.length - counter;

    slider.style.transform = `translateX(${-size * counter}px)`;

  }

});

Kode di atas akan mengecek apakah slider sudah sampai ke gambar terakhir atau gambar pertama. Jika slider sudah sampai ke gambar terakhir, maka slider akan kembali ke gambar pertama dengan animasi yang tidak terlihat. Begitu juga sebaliknya, jika slider sudah sampai ke gambar pertama, maka slider akan kembali ke gambar terakhir.

Dengan menambahkan kode JavaScript di atas, kita berhasil membuat slider gambar sederhana yang bisa digunakan di dalam website kita. Anda bisa menyesuaikan ukuran dan jumlah gambar yang ditampilkan sesuai dengan kebutuhan Anda.

Dalam membuat slider gambar, pastikan Anda menambahkan alt text untuk setiap gambar yang ditampilkan. Hal ini akan membantu mesin pencari dalam mengenali isi konten di dalam website Anda dan meningkatkan SEO website Anda

Selain itu, pastikan juga untuk memperhatikan ukuran gambar yang digunakan. Gambar yang terlalu besar akan memperlambat waktu loading website Anda, sehingga dapat memengaruhi pengalaman pengguna. Sebaiknya, gunakan gambar dengan ukuran yang sudah dioptimalkan agar website Anda tetap responsif dan cepat.

Untuk meningkatkan keterlibatan pengguna, Anda juga bisa menambahkan tombol navigasi untuk mengontrol slider. Berikut contoh kode HTML dan JavaScript untuk menambahkan tombol navigasi:

HTML:

<div class="slider">

  <img src="gambar1.jpg">

  <img src="gambar2.jpg">

  <img src="gambar3.jpg">

  <button class="prev-btn">&lt;</button>

  <button class="next-btn">&gt;</button>

</div>

JavaScript:

const prevBtn = document.querySelector(".prev-btn");

const nextBtn = document.querySelector(".next-btn");

prevBtn.addEventListener("click", () => {

  if (counter <= 0) return;

  counter--;

  slider.style.transition = "transform 0.3s ease-in-out";

  slider.style.transform = `translateX(${-size * counter}px)`;

});

nextBtn.addEventListener("click", () => {

  if (counter >= images.length - 1) return;

  counter++;

  slider.style.transition = "transform 0.3s ease-in-out";

  slider.style.transform = `translateX(${-size * counter}px)`;

});

Kode di atas akan menambahkan tombol navigasi sebelum dan sesudah slider. Ketika tombol sebelum diklik, slider akan berpindah ke gambar sebelumnya. Sebaliknya, ketika tombol sesudah diklik, slider akan berpindah ke gambar selanjutnya.

Dengan menambahkan tombol navigasi, pengguna dapat mengontrol slider dengan lebih mudah dan membuat pengalaman pengguna menjadi lebih baik.

Demikianlah cara sederhana untuk membuat slider gambar dengan JavaScript. Dengan mengikuti tutorial ini, Anda dapat menambahkan fitur yang menarik ke dalam website Anda dan meningkatkan pengalaman pengguna. Jangan lupa untuk terus belajar dan mencoba hal-hal baru dalam pengembangan website. Semoga artikel ini bermanfaat bagi Anda.

Muhamad Aksa
Muhamad Aksa Halo, saya seorang blogger yang senang dengan dunia teknologi. Saya tertarik dengan perkembangan teknologi terbaru dan cara pengaruhnya terhadap kehidupan kita, baik secara positif maupun negatif.