Image Slider (Carousel) in HTML, CSS & JavaScript

📌 What is an Image Slider?

An image slider (carousel) allows users to:

👉 view multiple images
👉 navigate using buttons or swipe

Used in:

galleries
landing pages
portfolios
1️⃣ Basic HTML structure
<div class="slider">

<div class="slides">
<img src="img1.jpg" class="slide active">
<img src="img2.jpg" class="slide">
<img src="img3.jpg" class="slide">
</div>

<button class="prev">&#10094;</button>
<button class="next">&#10095;</button>

</div>
2️⃣ CSS styling
.slider {
position: relative;
max-width: 600px;
margin: auto;
overflow: hidden;
}

.slides {
position: relative;
}

.slide {
display: none;
width: 100%;
border-radius: 10px;
}

.slide.active {
display: block;
}

button.prev, button.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
}

.prev { left: 10px; }
.next { right: 10px; }
3️⃣ JavaScript logic
<script>

let index = 0;
const slides = document.querySelectorAll('.slide');

function showSlide(i) {
slides.forEach(slide => slide.classList.remove('active'));
slides[i].classList.add('active');
}

document.querySelector('.next').addEventListener('click', () => {
index = (index + 1) % slides.length;
showSlide(index);
});

document.querySelector('.prev').addEventListener('click', () => {
index = (index - 1 + slides.length) % slides.length;
showSlide(index);
});

</script>
🔥 Key Features
next / previous navigation
loop through images
simple and lightweight
✨ Add Auto Slide (optional)
<script>
setInterval(() => {
index = (index + 1) % slides.length;
showSlide(index);
}, 3000);
</script>

👉 changes every 3 seconds

✨ Add transition effect
.slide {
opacity: 0;
transition: opacity 0.5s ease;
}

.slide.active {
opacity: 1;
}
📱 Mobile Tip

You can add swipe support (advanced):

touchstart
touchend
🔐 Performance Tip
<img src="img.jpg" loading="lazy">
✅ Summary

To build a slider:

create HTML structure
style with CSS
control with JavaScript
add navigation
🚀 Next Step

You can extend this by:

dots indicator
swipe gesture
thumbnails preview
fullscreen mode

Hope this helps 🚀