Image Slider / Carousel with HTML, CSS & JavaScript
10 DAYS 10 PROJECT CHALLENGE
Day #04
Project Overview
This project is an Image Slider / Carousel built using HTML, CSS, and JavaScript. It allows users to smoothly navigate through multiple images using interactive controls such as next/previous buttons or automatic sliding functionality. The slider is designed to be modern, responsive, and beginner-friendly, making it a great project to learn DOM manipulation, event handling, animations, and responsive styling with CSS.
Key Features
- Smooth Image Sliding – Navigate through images with seamless slide transitions.
- Next/Previous Controls – Easily switch between images using navigation buttons.
- Auto Slide Feature – Images automatically change after a set interval for a dynamic experience.
- Responsive Design – Works smoothly on desktop, tablet, and mobile devices.
- Navigation Dots/Indicators – Quickly jump to any slide and track the active image.
- Modern UI Design – Clean, stylish, and user-friendly interface with CSS styling.
- Keyboard/Touch Support – Supports swipe gestures or keyboard navigation for better usability.
- Beginner-Friendly Project – Great for learning JavaScript DOM manipulation, event handling, animations, and responsive web design.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider / Carousel</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slider">
<div class="slides">
<img src="https://picsum.photos/600/300?random=1" alt="Slide 1">
<img src="https://picsum.photos/600/300?random=2" alt="Slide 2">
<img src="https://picsum.photos/600/300?random=3" alt="Slide 3">
<img src="https://picsum.photos/600/300?random=4" alt="Slide 4">
</div>
<button class="btn prev">❮</button>
<button class="btn next">❯</button>
<div class="dots"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Code
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #002252;
font-family: Arial, sans-serif;
}
.slider {
position: relative;
width: 80%;
max-width: 600px;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slides img {
width: 100%;
border-radius: 12px;
}
/* Buttons */
.btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 50%;
border: 2px solid white;
}
.btn:hover {
background: rgba(0,0,0,0.7);
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
/* Dots */
.dots {
text-align: center;
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
}
.dot {
height: 12px;
width: 12px;
margin: 0 5px;
background-color: rgba(255,255,255,0.6);
border-radius: 50%;
display: inline-block;
cursor: pointer;
transition: background-color 0.3s;
}
.dot.active {
background-color: white;
}
Javascript Code
const slides = document.querySelector('.slides');
const images = document.querySelectorAll('.slides img');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
const dotsContainer = document.querySelector('.dots');
let index = 0;
let dots = [];
// Create dots dynamically
images.forEach((_, i) => {
const dot = document.createElement('span');
dot.classList.add('dot');
if (i === 0) dot.classList.add('active');
dot.addEventListener('click', () => showSlide(i));
dotsContainer.appendChild(dot);
dots.push(dot);
});
function updateDots() {
dots.forEach(dot => dot.classList.remove('active'));
dots[index].classList.add('active');
}
function showSlide(i) {
if (i < 0) {
index = images.length - 1;
} else if (i >= images.length) {
index = 0;
} else {
index = i;
}
slides.style.transform = `translateX(${-index * 100}%)`;
updateDots();
}
prevBtn.addEventListener('click', () => showSlide(index - 1));
nextBtn.addEventListener('click', () => showSlide(index + 1));
// Auto-slide every 3s
setInterval(() => {
showSlide(index + 1);
}, 3000);
Your Task
Create a similar project on your own and share your CodePen link in the comments.
I’ll review your work and share my feedback as a reply!
Related Projects
Day 6 : Random Quote Generator
Displays a random quote on button click or from an API.
Concepts: Math.random(), API fetch.
Day 7 : Countdown Timer
A countdown timer for events (e.g., New Year countdown).
Concepts: Date object, time calculations.
Day 8 : BMI Calculator
Calculates Body Mass Index from height and weight inputs.
Concepts: Form handling, math operations.
Hello,
Content is so good and easy to understand. thank you for preparing this.
I noticed one correction. In this image slider project, project review is about digital click. Please correct it.
Thank you
Hello
Thank you so much for your kind words and for appreciating the content. We glad you found it helpful and easy to understand.
Also, thank you for pointing out the correction. We noticed the issue regarding the project review section in the Image Slider project, and now the article is updated it accordingly.
We really appreciate your feedback and support!
Thank you.
Team DesignWithRehana