Building a Simple Image Slider in JavaScript Without Any Libraries
If you're learning JavaScript and looking for a hands-on project, creating an image slider from scratch is a fantastic exercise. This tutorial walks you through building a basic slider using vanilla JavaScript — no external libraries, frameworks, or dependencies required.
Why Build It Yourself?
Most production sites use libraries or frameworks to handle sliders and carousels, but building one manually is a great way to understand the DOM, event listeners, and dynamic element manipulation.
Step 1: Prepare Your HTML
We'll start with a container element that holds the images and some navigation buttons.
<div class="slider">
<img src="image1.jpg" class="slide active">
<img src="image2.jpg" class="slide">
<img src="image3.jpg" class="slide">
<button id="prev">❮</button>
<button id="next">❯</button>
</div>
Step 2: Style the Slider With CSS
The following styles give basic layout and hiding/showing behavior for slides.
.slider {
position: relative;
width: 100%;
max-width: 600px;
margin: auto;
overflow: hidden;
}
.slide {
display: none;
width: 100%;
}
.slide.active {
display: block;
}
button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0,0,0,0.5);
border: none;
color: white;
padding: 12px;
cursor: pointer;
font-size: 18px;
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
Step 3: Add JavaScript Logic
This script will handle showing the correct slide and cycling through them on button clicks.
const slides = document.querySelectorAll(".slide");
let currentSlide = 0;
function showSlide(index) {
slides.forEach((slide, i) => {
slide.classList.remove("active");
if (i === index) {
slide.classList.add("active");
}
});
}
document.getElementById("prev").addEventListener("click", () => {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
showSlide(currentSlide);
});
document.getElementById("next").addEventListener("click", () => {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
});
showSlide(currentSlide);
Step 4: Replace the Images
Update the src attributes in the HTML with your own image URLs. Make sure the images are of similar size to maintain layout consistency.
Conclusion
This slider is simple and lightweight, ideal for portfolios or landing pages. You can enhance it by adding autoplay, swipe gestures, or transition effects.
If this article helped you, consider supporting my writing at Buy Me a Coffee ☕