Image Slider / Carousel with HTML, CSS & JavaScript
10 DAYS 10 PROJECT CHALLENGE
Day #04
Project Overview
The Image Slider / Carousel is a beginner’s friendly project which is built using HTML, CSS, and JavaScript. This project enables one to view several images on a slider and switch between them with the help of previous and next buttons. The images also change automatically after a few seconds, creating a smooth and interactive experience.
This project is perfect for beginners as it helps them learn essential frontend technologies such as HTML, CSS, and JavaScript. By creating this image slider, you can learn how JavaScript works with HTML elements as it involves the core concepts of event listeners, slide changing logic, and dynamic creation of navigation dots. Moreover, the project also allows one to practice CSS and HTML and become familiar with layout creation, transitions, position layers, and responsive design fundamentals.
key Features
- Smooth Image Sliding: The Image Slider changes from one image to another with a smooth transition, making the movement between slides more visually appealing.
- Next and Previous Controls: Users can manually switch between images using the previous and next buttons. This gives users direct control over which image they want to view.
- Automatic Slide Change: The images automatically change after a set interval using JavaScript. This allows the slider to continue displaying different images without requiring manual interaction.
- Navigation Dots: The slider has navigation dots that are generated for each image allowing users to quickly jump to a particular slide and know their position within the slider.
- Responsive Design: The image slider is responsive thus making it easy to view on different screen sizes and can be viewed on desktops, tablets, and mobile devices.
- Modern and Simple UI: This project uses modern elements such as rounded edges, buttons, transitions among others to create an image slider with a simple and elegant UI.
- Interactive JavaScript Functionality: This project involves the use of JavaScript to create interactivity in the image slider by enabling the script to control the slide transition, buttons, and dots among other features.
- Beginner-Friendly: This is a perfect project for beginners as it enables them to gain experience in DOM manipulation, events, CSS transitions and JavaScript functions among other skills.
What You’ll Learn
- Understand how to select HTML elements using JavaScript.
- Learn how to handle button click events.
- Practice changing slides dynamically using JavaScript.
- Learn how to create HTML elements dynamically with JavaScript.
- Understand how CSS transform and transition can create slide animations.
- Learn how to create and update active navigation indicators.
- Understand how setInterval() can be used for automatic slide changes.
- Practice using Flexbox and positioning in CSS.
- Understand how HTML, CSS, and JavaScript work together to create an interactive component.
HTML Code
The HTML code creates the basic structure of the Image Slider. First of all, the style.css file is imported into the section so that CSS can stylize the slider. The whole content of the slider is placed within the with the slider class.
Inside this container, there is a div with the slides class, which contains images that will be shown in the Image Slider. The prev and next buttons have the corresponding classes so that JavaScript can recognize them and add functionality to them. The dots div is used to hold the navigation dots, which will also be stylized with CSS. Finally, the script.js file is linked at the bottom of the <body> so that JavaScript can handle the slider functionality.
<!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
The CSS code presented above is responsible for the overall styling and layout of the Image Slider. To begin with, the body utilizes Flexbox to center the slider both vertically and horizontally. Moreover, the slider’s width, border-radius, box-shadow, and overflow are set with the help of the .slider class.
The .slides class uses Flexbox to place the images next to each other and applies a transition when the slides move. As for the buttons, they are placed in the absolute position relative to the slider. Finally, the dots’ position and style are defined with the help of the .dots class which adds a little padding at the bottom of the slider and slightly changes the style of the active dot.
* {
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
The JavaScript code adds the interactive functionality to the Image Slider. First, the code selects the slides, images, navigation buttons, and dots container from the HTML. The index variable keeps track of the currently displayed image.
The code creates navigation dots dynamically based on the number of images and adds click events to them. The showSlide() function changes the current slide by using translateX() and also updates the active dot. The previous and next buttons call this function to move through the images. Finally, setInterval() automatically changes the slide every three seconds, creating a continuous image carousel.
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