Source codes:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Fade-in Fade-out Slider</title>
<style>
body{
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #222;
}
.slider{
position: relative;
width: 80%;
max-width: 600px;
height: 300px;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.slides {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1.5s ease-in-out;
}
.slides.active {
opacity: 1;
}
.slides img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dots {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
}
.dots span {
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
cursor: pointer;
}
.dots span.active {
background: white;
}
</style>
</head>
<body>
<div class=”slider”>
<div class=”slides active”>
<img src=”1.jpg” alt=”Slide 1″>
</div>
<div class=”slides “>
<img src=”2.jpg” alt=”Slide 2″>
</div>
<div class=”slides”>
<img src=”3.jpg” alt=”Slide 3″>
</div>
</div>
<div class=”dots”>
<span class=”active” onclick=”setSlide(0)”></span>
<span onclick=”setSlide(1)”></span>
<span onclick=”setSlide(2)”></span>
</div>
<script>
let currentIndex =0;
const slides = document.querySelectorAll(‘.slides’);
const dots = document.querySelectorAll(‘.dots span’);
function showSlide(index) {
slides.forEach((slide, i) =>{
slide.classList.remove(‘active’);
dots[i].classList.remove(‘active’);
if (i === index) {
slide.classList.add(‘active’);
dots[i].classList.add(‘active’);
}
});
}
function nextSlide() {
currentIndex = (currentIndex + 1) % slides.length;
showSlide(currentIndex);
}
function setSlide(
index) {
currentIndex = index;
showSlide(
currentIndex);
}
setInterval(
nextSlide, 3000);
</script>
</body>
</html>
