You need to enable javaScript to run this app.
Logo KangHaki

KangHaki

Membuat Slide Show menggunakan Java Script

  • Selasa, 07 Oktober 2025
  • Kanghaki
  • 0 komentar
Membuat Slide Show menggunakan Java Script

Silahkan Klik untuk unduh file slideshow.html 

Fungsi-Fungsi Slideshow (JavaScript)

1. Inisialisasi Elemen

const slidesEl = document.getElementById('slides'); const slides = Array.from(slidesEl.children);

➡️ Menangkap semua elemen

yang akan ditampilkan bergantian dalam slideshow.

2. Navigasi & Kontrol

const prevBtn = document.getElementById('prev'); const nextBtn = document.getElementById('next'); const toggleAutoBtn = document.getElementById('toggleAuto');

➡️ Mengambil tombol navigasi untuk berpindah ke slide sebelumnya, berikutnya, atau menghentikan otomatisasi.

3. Fungsi goTo(i)

function goTo(i){ index = (i + slides.length) % slides.length; slidesEl.style.transform = `translateX(${-index * 100}%)`; }

➡️ Fungsi ini menggeser tampilan slideshow ke slide ke-i menggunakan transformasi CSS translateX.
Misalnya:

  • index = 0 → slide pertama

  • index = 1 → slide kedua, dst.

4. Fungsi next() dan prev()

 
function next(){ goTo(index + 1); } function prev(){ goTo(index - 1); }

➡️ Untuk berpindah ke slide berikutnya atau sebelumnya.
Dipanggil ketika pengguna menekan tombol ▶ atau ◀.

5. Autoplay (Timer Otomatis)

let autoplay = true; const intervalTime = 4000; let timer = null; function startTimer(){ if(timer) clearInterval(timer); if(autoplay) timer = setInterval(next, intervalTime); }

➡️ Slideshow akan otomatis berpindah setiap 4 detik.
Jika pengguna klik tombol Stop, maka autoplay dihentikan.

6. Fungsi toggleAuto

toggleAutoBtn.addEventListener('click', ()=>{ autoplay = !autoplay; toggleAutoBtn.textContent = autoplay ? 'Stop' : 'Play'; if(!autoplay && timer){ clearInterval(timer); timer = null; } if(autoplay) startTimer(); });

➡️ Mengaktifkan atau menonaktifkan perpindahan otomatis.

7. Navigasi via Keyboard

window.addEventListener('keydown', e=>{ if(e.key === 'ArrowRight') next(); if(e.key === 'ArrowLeft') prev(); });

➡️ Memungkinkan pengguna mengganti slide dengan tombol panah kiri dan kanan di keyboard.

8. Event untuk Thumbnail & Dots

dots.forEach(d => d.addEventListener('click', e=>{ goTo(+e.currentTarget.dataset.index); })); thumbs.forEach(t => t.addEventListener('click', e=>{ goTo(+e.currentTarget.dataset.index); }));

➡️ Klik pada titik kecil (dot) atau thumbnail gambar juga akan memanggil goTo() dan menampilkan slide sesuai index-nya.

9. Efek Transisi

.slides { transition: transform 0.6s cubic-bezier(.25,.8,.25,1); }

➡️ CSS diatur agar setiap perpindahan slide halus dan lembut, seolah-olah gambar bergeser perlahan.

Alur Kerjanya

  1. Saat halaman dimuat → fungsi startTimer() dijalankan.

  2. Setiap 4 detik → fungsi next() dipanggil otomatis.

  3. Pengguna bisa klik tombol, titik, atau thumbnail untuk ganti slide manual.

  4. JavaScript akan mengubah posisi translateX pada container .slides.

  5. CSS menambahkan animasi halus saat berganti gambar.

Bagikan artikel ini:

Beri Komentar

Artikel Terkait

Bahan Ajar: Desain Web Menggunakan Adobe Dreamweaver 2021

Bahan Ajar: Desain Web Menggunakan Adobe Dreamweaver 2021

Selasa, 26 Agustus 2025
Kang Haki

- Ketua -

Jika kamu tak tahan letihnya dan penatnya belajar, maka sungguh kamu akan menanggung perihnya kebodohan (nasehat imam syafi'i). Kulon Progo, 22…

Selengkapnya
Berlangganan
Tautan
Strava Kang Haki Fb Kang Haki Instagram Kang Haki Twitter Kang Haki Tiktok Kang Haki Youtube Kang Haki Quran BeSmart Web Jurnal PKL XII DKV2 Web Jurnal PKL XII DKV1
Jajak Pendapat

Skill apa yang kalian pengin kuasai selama PKL?

Hasil
Banner
https://man2bantul.id/https://portal.man2bantul.id/https://sirekap.man2bantul.id/https://eptsp.man2bantul.id/https://smkn5balam.com/https://tuluskartika.or.id/https://smptk.tuluskartika.or.id/https://www.stai-nurulhidayah.ac.id/https://journal.stai-nurulhidayah.ac.id/https://ejurnal.stai-nurulhidayah.ac.id/https://tical2025.redclara.net/https://uptdselatan.com/masterpoker99masterpoker99masterpoker99poker757poker757
masterpoker99masterpoker99masterpoker99masterpoker99inifun88inifun88inifun88https://jrdindustry.com/inifun88inifun88inifun88inifun88inifun88vovo88vovo88vovo88vovo88vovo88
inifun88inifun 88inifun88 logininipokerini pokerinipoker loginvovo88vovo88vovo88vovo88inifun88inifun88inifun88vovo88itudewaitudewaitudewa loginitudewa loginitugolitugolitugol loginitugol login
https://trueblutravel.com/