You may have seen an image sliding feature on various popular social media platforms. Where the user can slide the image right or left. Did you know those types of image sliders can be made using HTML CSS and JavaScrip without using any plugins?
Today in this blog you will learn how to create an Image Slider using HTML CSS & JavaScript. Creating an image slider is an excellent way to enhance your coding skills in HTML, CSS, and JavaScript. Recently I have also created an Image Slider in Swiper Js I hope that post will also be beneficial for you.
If you are eager to see a demonstration of this Image Slider and are interested in learning how to create it using HTML CSS & JavaScript, then there is a video tutorial available below that will guide you through the process step by step.
Video Tutorial of Image Slider in HTML CSS & JavaScript
Steps For Creating Image Slider in HTML CSS & JavaScript
To create a Image Slider using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.htmlfile. The file name must be index and its extension .html - Create a
style.cssfile. The file name must be style and its extension .css - Create a
script.jsfile. The file name must be script and its extension .js
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Slider JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<script src="script.js" defer></script>
</head>
<body>
<section class="wrapper">
<i class="fa-solid fa-arrow-left button" id="prev"></i>
<div class="image-container">
<div class="carousel">
<img src="images/image1.jpg" alt="" />
<img src="images/image2.jpg" alt="" />
<img src="images/image3.jpg" alt="" />
<img src="images/image4.jpg" alt="" />
</div>
<i class="fa-solid fa-arrow-right button" id="next"></i>
</div>
</section>
</body>
</html>
Second, paste the following codes into your style.css file.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #343f4f;
}
.wrapper {
display: flex;
max-width: 650px;
width: 100%;
height: 400px;
background: #fff;
align-items: center;
justify-content: center;
position: relative;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.wrapper i.button {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 36px;
width: 36px;
background-color: #343f4f;
border-radius: 50%;
text-align: center;
line-height: 36px;
color: #fff;
font-size: 15px;
transition: all 0.3s linear;
z-index: 100;
cursor: pointer;
}
i.button:active {
transform: scale(0.94) translateY(-50%);
}
i#prev {
left: 25px;
}
i#next {
right: 25px;
}
.image-container {
height: 320px;
max-width: 500px;
width: 100%;
overflow: hidden;
}
.image-container .carousel {
display: flex;
height: 100%;
width: 100%;
transition: all 0.4s ease;
}
.carousel img {
height: 100%;
width: 100%;
border-radius: 18px;
border: 10px solid #fff;
object-fit: cover;
}
Third, paste the following codes into your script.js file.
// Get the DOM elements for the image carousel
const wrapper = document.querySelector(".wrapper"),
carousel = document.querySelector(".carousel"),
images = document.querySelectorAll("img"),
buttons = document.querySelectorAll(".button");
let imageIndex = 1,
intervalId;
// Define function to start automatic image slider
const autoSlide = () => {
// Start the slideshow by calling slideImage() every 2 seconds
intervalId = setInterval(() => slideImage(++imageIndex), 2000);
};
// Call autoSlide function on page load
autoSlide();
// A function that updates the carousel display to show the specified image
const slideImage = () => {
// Calculate the updated image index
imageIndex = imageIndex === images.length ? 0 : imageIndex < 0 ? images.length - 1 : imageIndex;
// Update the carousel display to show the specified image
carousel.style.transform = `translate(-${imageIndex * 100}%)`;
};
// A function that updates the carousel display to show the next or previous image
const updateClick = (e) => {
// Stop the automatic slideshow
clearInterval(intervalId);
// Calculate the updated image index based on the button clicked
imageIndex += e.target.id === "next" ? 1 : -1;
slideImage(imageIndex);
// Restart the automatic slideshow
autoSlide();
};
// Add event listeners to the navigation buttons
buttons.forEach((button) => button.addEventListener("click", updateClick));
// Add mouseover event listener to wrapper element to stop auto sliding
wrapper.addEventListener("mouseover", () => clearInterval(intervalId));
// Add mouseleave event listener to wrapper element to start auto sliding again
wrapper.addEventListener("mouseleave", autoSlide);
That’s all, now you’ve successfully created a project on Image Slider. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.
