Previous image
Next image
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider</title>
<style>
.slider {
width: 100%;
overflow: hidden;
}
.slides {
display: flex;
transition: transform 0.5s ease;
}
.slide {
min-width: 100%;
}
</style>
</head>
<body>
<div class="slider">
<div class="slides">
<div class="slide"><img src="image1.jpg" alt="Slide 1"></div>
<div class="slide"><img src="image2.jpg" alt="Slide 2"></div>
<div class="slide"><img src="image3.jpg" alt="Slide 3"></div>
</div>
</div>
<script>
const slider = document.querySelector('.slider');
const slides = document.querySelector('.slides');
const slideWidth = slides.firstElementChild.clientWidth;
let counter = 1;
function slide() {
slides.style.transform = `translateX(${-slideWidth * counter}px)`;
counter++;
if (counter === slides.children.length) {
counter = 0;
}
setTimeout(slide, 3000); // Change slide every 3 seconds
}
slide();
</script>
</body>
</html>