Kumpulan JavaScript Blogger
Script Slider Gambar Otomatis
<style>
.slider {
position: relative;
max-width: 100%;
margin: auto;
overflow: hidden;
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
box-sizing: border-box;
}
img {
width: 100%;
vertical-align: middle;
}
</style>
<div class="slider">
<div class="slides">
<div class="slide">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="slide">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="slide">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
<script>
const slides = document.querySelector('.slides');
let index = 0;
function showSlide() {
index++;
if (index >= document.querySelectorAll('.slide').length) {
index = 0;
}
slides.style.transform = `translateX(${-index * 100}%)`;
}
setInterval(showSlide, 3000); // Ubah setiap 3 detik
</script>
