Membuat Image Slider Gallery Interaktif dengan JavaScript
Membuat Image Slider Gallery Interaktif dengan JavaScript
Dipublikasikan: Juli 2026
Image slider adalah komponen web yang banyak digunakan di website portofolio, toko online, dan galeri. Tutorial ini membuat slider dengan navigasi, auto-play, dan indikator.
Fitur
- Navigasi prev/next
- Indikator dot
- Auto-play dengan interval
- Transisi animasi halus
Kode Lengkap
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider Gallery</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',Arial,sans-serif; background:#f0f2f5; min-height:100vh; display:flex; justify-content:center; align-items:center; padding:20px; }
.container { background:#fff; border-radius:20px; padding:25px; box-shadow:0 20px 60px rgba(0,0,0,0.1); width:100%; max-width:700px; }
h1 { text-align:center; color:#2d3436; margin-bottom:20px; }
.slider { position:relative; border-radius:14px; overflow:hidden; }
.slides { display:flex; transition:transform 0.5s ease; }
.slide { min-width:100%; }
.slide img { width:100%; height:400px; object-fit:cover; display:block; }
.slide .caption { padding:15px 20px; background:rgba(0,0,0,0.7); color:#fff; position:absolute; bottom:0; left:0; right:0; text-align:center; }
.nav-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.8); border:none; width:45px; height:45px; border-radius:50%; cursor:pointer; font-size:20px; z-index:10; }
.nav-btn:hover { background:#fff; }
.prev { left:15px; }
.next { right:15px; }
.dots { display:flex; justify-content:center; gap:10px; margin-top:18px; }
.dot { width:12px; height:12px; border-radius:50%; background:#dfe6e9; cursor:pointer; transition:all 0.3s; }
.dot.active { background:#6c5ce7; width:30px; border-radius:6px; }
.controls { display:flex; justify-content:center; gap:12px; margin-top:15px; }
.controls button { padding:8px 18px; border:none; border-radius:8px; cursor:pointer; font-size:13px; }
.btn-play { background:#00b894; color:#fff; }
.btn-play.paused { background:#fdcb6e; }
</style>
</head>
<body>
<div class="container">
<h1>ðŸ–¼ï¸ Image Slider Gallery</h1>
<div class="slider">
<div class="slides" id="slides">
<div class="slide"><img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=700" alt="Nature" /><div class="caption">Keindahan Alam Pegunungan</div></div>
<div class="slide"><img src="https://images.unsplash.com/photo-1470071459604-7b8ec44ffd0e?w=700" alt="Forest" /><div class="caption">Hutan Tropis yang Asri</div></div>
<div class="slide"><img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=700" alt="Beach" /><div class="caption">Pantai dengan Pasir Putih</div></div>
<div class="slide"><img src="https://images.unsplash.com/photo-1510784722466-f2aa9c6fff89?w=700" alt="Sunset" /><div class="caption">Matahari Terbenam Spektakuler</div></div>
</div>
<button class="nav-btn prev" onclick="moveSlide(-1)">‹</button>
<button class="nav-btn next" onclick="moveSlide(1)">›</button>
</div>
<div class="dots" id="dots"></div>
<div class="controls"><button class="btn-play" id="playBtn" onclick="togglePlay()">⸠Pause</button></div>
</div>
<script>
let current = 0, total = 4, autoPlay = true, interval;
function renderDots() {
const dots = document.getElementById('dots');
dots.innerHTML = Array.from({length: total}, (_,i) => `<div class="dot ${i===current?'active':''}" onclick="goTo(${i})"></div>`).join('');
}
function updateSlider() {
document.getElementById('slides').style.transform = `translateX(-${current * 100}%)`;
renderDots();
}
function moveSlide(dir) { current = (current + dir + total) % total; updateSlider(); }
function goTo(i) { current = i; updateSlider(); }
function togglePlay() {
autoPlay = !autoPlay;
document.getElementById('playBtn').textContent = autoPlay ? '⸠Pause' : '▶ Play';
if (autoPlay) startAutoPlay();
else clearInterval(interval);
}
function startAutoPlay() { clearInterval(interval); interval = setInterval(() => moveSlide(1), 3000); }
renderDots(); startAutoPlay();
</script>
</body>
</html>Cara Jalankan
- Simpan sebagai slider.html
- Buka di browser
- Gunakan tombol navigasi atau biarkan auto-play
"Tampilkan galeri foto Anda dengan slider interaktif!"
Label: Tutorial, Web App, Image Slider, Gallery, JavaScript, HTML, CSS
Posting Komentar untuk "Membuat Image Slider Gallery Interaktif dengan JavaScript"
Terimaksih telah menyempatkan hadir di blog saya
Posting Komentar