Creating image sliders is an essential feature for websites to display multiple images in an engaging manner. For beginners in web development, building an image slider serves as a valuable project to grasp fundamental concepts like responsive design, manipulating the Document Object Model (DOM), and handling JavaScript event listeners.
In this guide, I’ll demonstrate how to craft a responsive image slider using HTML, CSS, and JavaScript. The approach here involves using plain JavaScript, avoiding external libraries such as SwiperJs or Owl Carousel. This hands-on approach allows beginners to comprehend the workings of image sliders and the necessary code for their development.
The image slider includes user-friendly buttons for navigating backward and forward. Additionally, there’s a horizontal scrollbar serving as a slider indicator, enabling users to slide images by dragging it. This slider is compatible with popular browsers like Chrome, Firefox, Edge, and is responsive on various devices, including mobile phones and tablets.
To create a responsive image slider using HTML, CSS, and vanilla JavaScript, follow these simple step-by-step instructions:
Creating an Image Slider: Step-by-Step Guide
- Folder Setup:
- Create a new folder with any name you prefer.
- Inside this folder, create the necessary files for your project.
- File Creation:
- Create an
index.htmlfile to serve as the main file. - Develop a
style.cssfile for the CSS code. - Establish a
script.jsfile for the JavaScript code.
- Create an
- Image Folder:
- Download the “Images” folder and place it in your project directory.
- This folder contains all the images required for the image slider. Alternatively, you can use your own images.
- HTML Setup:
- Open your
index.htmlfile. - Add essential HTML semantic tags, including div, button, img, etc., to set up the foundation for the image slider.
- Open your
Note replace the image path in the src below with yours
Html file:
<!DOCTYPE html>
<!-- Coding By CodeMagnet -->
<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</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="st.css" />
<script src="coding.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="C:\Users\Swarna Khushbu\Desktop\Coding\image11.jpg" alt="image11" />
<img class="image-item" src="C:\Users\Swarna Khushbu\Desktop\Coding\image20.jpg" alt="image20" />
<img class="image-item" src="C:\Users\Swarna Khushbu\Desktop\Coding\image12.jpg" alt="image12" />
<img class="image-item" src="C:\Users\Swarna Khushbu\Desktop\Coding\image13.jpg" alt="image13" />
<img class="image-item" src="C:\Users\Swarna Khushbu\Desktop\Coding\image14.jpg" alt="image14" />
<img class="image-item" src="C:\Users\Swarna Khushbu\Desktop\Coding\image15.jpg" alt="image15" />
<img class="image-item" src="C:\Users\Swarna Khushbu\Desktop\Coding\image16.jpg" alt="image16" />
<img class="image-item" src="C:\Users\Swarna Khushbu\Desktop\Coding\image17.jpg" alt="image17" />
<img class="image-item" src="C:\Users\Swarna Khushbu\Desktop\Coding\image18.jpg" alt="image18" />
<img class="image-item" src="C:\Users\Swarna Khushbu\Desktop\Coding\image19.jpg" alt="image19" />
</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>CSS file(st.css): create another file style.css and add the code below code there 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%;
}
}script.js file(coding.js): To make your image slider operational, incorporate the following JavaScript code into your script.js file. This code utilizes event listeners such as mouseup, mousemove, mousedown, click, and mathematical calculations, ensuring the slider functions as intended.
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);In summary, crafting a responsive image slider from the ground up with HTML, CSS, and vanilla JavaScript is an excellent way to enhance your web development skills. Following the instructions provided in this guide, you’ve successfully constructed a working image slider. Now, you can explore various styles, transitions, and features to personalize and elevate your image slider to new heights.
Leave a Reply