Create A Responsive Image Slider Using HTML CSS and JavaScript
Image sliders, which present several photos in an interesting way, are becoming a crucial part of websites. Making an image slider may help you, as a novice web developer, learn and get better at understanding and using basic web development concepts like JavaScript event listeners, DOM manipulation, and responsive designs.
In this blog post, I will show you how to create a responsive image slider using HTML, CSS, and JavaScript. We will use vanilla JavaScript to create this slider without relying on external JavaScript libraries such as SwiperJs or Owl Carousel. This way, beginners can learn how these image sliders work and the code required to build them.
In this image slider, there are two buttons for sliding images: one for going back and one for moving forward. There is also a horizontal scrollbar that acts as a slider indicator and can be used to slide images by dragging it. This slider supports all major browsers like Chrome, Firefox, and Edge, as well as mobile or tablet devices.
Video Tutorial of Image Slider Using HTML and JavaScript
The YouTube video up top might be a great tool if you want to learn through video lessons. To simplify the process of making your own picture slider straightforward and easy to understand, I’ve broken down each line of code and added insightful comments in the video.
However, if you like reading blog posts or want a step-by-step guide for this project, you can continue reading this post. By the end of this post, you will have your own image slider that is easy to customize and implement into your other projects.
Steps to Create Image Slider in HTML & JavaScript
To create a responsive image slider using HTML, CSS, and vanilla JavaScript, follow these simple step-by-step instructions:
- First, create a folder with any name you like. Then, make the necessary files inside it.
- Create a file called
index.htmlto serve as the main file. - Create a file called
style.cssfor the CSS code. - Create a file called
script.jsfor the JavaScript code. - Finally, download the Images folder and put it in your project directory. This folder contains all the images you’ll need for this image slider. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include all essential HTML semantic tags, such as div, button, img, etc., for the image slider.
<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Slider in HTML CSS and JavaScript | CodingNepal</title>
<!-- Google Fonts Link For Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container">
<div class="slider-wrapper">
<button id="prev-slide" class="slide-button material-symbols-rounded">
chevron_left
</button>
<ul class="image-list">
<img class="image-item" src="images/img-1.jpg" alt="img-1" />
<img class="image-item" src="images/img-2.jpg" alt="img-2" />
<img class="image-item" src="images/img-3.jpg" alt="img-3" />
<img class="image-item" src="images/img-4.jpg" alt="img-4" />
<img class="image-item" src="images/img-5.jpg" alt="img-5" />
<img class="image-item" src="images/img-6.jpg" alt="img-6" />
<img class="image-item" src="images/img-7.jpg" alt="img-7" />
<img class="image-item" src="images/img-8.jpg" alt="img-8" />
<img class="image-item" src="images/img-9.jpg" alt="img-9" />
<img class="image-item" src="images/img-10.jpg" alt="img-10" />
</ul>
<button id="next-slide" class="slide-button material-symbols-rounded">
chevron_right
</button>
</div>
<div class="slider-scrollbar">
<div class="scrollbar-track">
<div class="scrollbar-thumb"></div>
</div>
</div>
</div>
</body>
</html>Next, add the following CSS codes to your style.css file to make your image slider beautiful. You can experiment with different CSS properties like colors, fonts, and backgrounds to give a personalized touch to your slider. If you load the web page in your browser, you can see your image slider with a scrollbar and an arrow button.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f1f4fd;
}
.container {
max-width: 1200px;
width: 95%;
}
.slider-wrapper {
position: relative;
}
.slider-wrapper .slide-button {
position: absolute;
top: 50%;
outline: none;
border: none;
height: 50px;
width: 50px;
z-index: 5;
color: #fff;
display: flex;
cursor: pointer;
font-size: 2.2rem;
background: #000;
align-items: center;
justify-content: center;
border-radius: 50%;
transform: translateY(-50%);
}
.slider-wrapper .slide-button:hover {
background: #404040;
}
.slider-wrapper .slide-button#prev-slide {
left: -25px;
display: none;
}
.slider-wrapper .slide-button#next-slide {
right: -25px;
}
.slider-wrapper .image-list {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 18px;
font-size: 0;
list-style: none;
margin-bottom: 30px;
overflow-x: auto;
scrollbar-width: none;
}
.slider-wrapper .image-list::-webkit-scrollbar {
display: none;
}
.slider-wrapper .image-list .image-item {
width: 325px;
height: 400px;
object-fit: cover;
}
.container .slider-scrollbar {
height: 24px;
width: 100%;
display: flex;
align-items: center;
}
.slider-scrollbar .scrollbar-track {
background: #ccc;
width: 100%;
height: 2px;
display: flex;
align-items: center;
border-radius: 4px;
position: relative;
}
.slider-scrollbar:hover .scrollbar-track {
height: 4px;
}
.slider-scrollbar .scrollbar-thumb {
position: absolute;
background: #000;
top: 0;
bottom: 0;
width: 50%;
height: 100%;
cursor: grab;
border-radius: inherit;
}
.slider-scrollbar .scrollbar-thumb:active {
cursor: grabbing;
height: 8px;
top: -2px;
}
.slider-scrollbar .scrollbar-thumb::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: -10px;
bottom: -10px;
}
/* Styles for mobile and tablets */
@media only screen and (max-width: 1023px) {
.slider-wrapper .slide-button {
display: none !important;
}
.slider-wrapper .image-list {
gap: 10px;
margin-bottom: 15px;
scroll-snap-type: x mandatory;
}
.slider-wrapper .image-list .image-item {
width: 280px;
height: 380px;
}
.slider-scrollbar .scrollbar-thumb {
width: 20%;
}
}Finally, add the following JavaScript code to your script.js file to make your image slider functional. This code includes event listeners like mouseup, mousemove, mousedown, click, and mathematical calculations to make the slider work as expected.
const initSlider = () => {
const imageList = document.querySelector(".slider-wrapper .image-list");
const slideButtons = document.querySelectorAll(".slider-wrapper .slide-button");
const sliderScrollbar = document.querySelector(".container .slider-scrollbar");
const scrollbarThumb = sliderScrollbar.querySelector(".scrollbar-thumb");
const maxScrollLeft = imageList.scrollWidth - imageList.clientWidth;
// Handle scrollbar thumb drag
scrollbarThumb.addEventListener("mousedown", (e) => {
const startX = e.clientX;
const thumbPosition = scrollbarThumb.offsetLeft;
const maxThumbPosition = sliderScrollbar.getBoundingClientRect().width - scrollbarThumb.offsetWidth;
// Update thumb position on mouse move
const handleMouseMove = (e) => {
const deltaX = e.clientX - startX;
const newThumbPosition = thumbPosition + deltaX;
// Ensure the scrollbar thumb stays within bounds
const boundedPosition = Math.max(0, Math.min(maxThumbPosition, newThumbPosition));
const scrollPosition = (boundedPosition / maxThumbPosition) * maxScrollLeft;
scrollbarThumb.style.left = `${boundedPosition}px`;
imageList.scrollLeft = scrollPosition;
}
// Remove event listeners on mouse up
const handleMouseUp = () => {
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
}
// Add event listeners for drag interaction
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("mouseup", handleMouseUp);
});
// Slide images according to the slide button clicks
slideButtons.forEach(button => {
button.addEventListener("click", () => {
const direction = button.id === "prev-slide" ? -1 : 1;
const scrollAmount = imageList.clientWidth * direction;
imageList.scrollBy({ left: scrollAmount, behavior: "smooth" });
});
});
// Show or hide slide buttons based on scroll position
const handleSlideButtons = () => {
slideButtons[0].style.display = imageList.scrollLeft <= 0 ? "none" : "flex";
slideButtons[1].style.display = imageList.scrollLeft >= maxScrollLeft ? "none" : "flex";
}
// Update scrollbar thumb position based on image scroll
const updateScrollThumbPosition = () => {
const scrollPosition = imageList.scrollLeft;
const thumbPosition = (scrollPosition / maxScrollLeft) * (sliderScrollbar.clientWidth - scrollbarThumb.offsetWidth);
scrollbarThumb.style.left = `${thumbPosition}px`;
}
// Call these two functions when image list scrolls
imageList.addEventListener("scroll", () => {
updateScrollThumbPosition();
handleSlideButtons();
});
}
window.addEventListener("resize", initSlider);
window.addEventListener("load", initSlider);To understand the JavaScript code better, I recommend watching the above video tutorial, reading the code comments, and experimenting with the code.
Conclusion and Final words
In conclusion, understanding how to create a responsive image slider from scratch using HTML, CSS, and vanilla JavaScript is a useful addition to your web development knowledge as well as a worthwhile learning experience. You have successfully constructed a working picture slider by following the instructions in this post, and you can now readily alter it to suit your preferences.
Feel free to experiment with different styles, transitions, and features to take your image slider to the next level. To further improve your web development, I recommend you try recreating other interactive images or card sliders available on this website.
If you encounter any problems while creating your image slider, you can download .
