Picture sliders have turned into a significant part of sites, used to feature numerous pictures in a connecting way. As a novice web designer, making a picture slider can be a valuable task to comprehend and further develop your key web improvement ideas, like responsive plans, DOM control, and JavaScript occasion audience members.
In this blog entry, I will tell you the best way to make a responsive picture slider utilizing HTML, CSS, and JavaScript. We will utilize vanilla JavaScript to make this slider without depending on outside JavaScript libraries like SwiperJs or Owl Merry go round. Along these lines, novices can figure out how these picture sliders work and the code expected to assemble them.
In this picture slider, there are two buttons for sliding pictures: one for returning and one for pushing ahead. There is likewise a level scrollbar that goes about as a slider pointer and can be utilized to slide pictures by hauling it. This slider upholds all significant programs like Chrome, Firefox, and Edge, as well as versatile or tablet gadgets.
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.
<!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.
* {
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.
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);Please Subscribe to my Youtube Channel
