In this Image Slider JavaScript Project, we used HTML, CSS3, and JavaScript to create a smooth and responsive image carousel. This project is beginner-friendly and a great way to learn the basics of frontend web development. You’ll understand how JavaScript works with HTML and CSS to create interactive elements on a webpage.
Why should you do this ‘image-slider project’?
It helps you strengthen your JS fundamentals and understand JavaScript concepts such as DOM Manipulation, time-interval concepts such as setTimeInterval(), setTimeOut(), etc., along with HTML and CSS designing.
We created three files: index.html, style.css, and index.js, and imported them to function together.
HTML Part:
In this, we created a div as a ‘slider-container’ having another div as an ‘image-container’ containing all image sources and two buttons for the left and right swipe images.
<body>
<h1>Image Slider</h1>
<div class="slide-container">
<div class="image-container">
<img src="https://picsum.photos/id/237/500/300" alt="image">
<img src="https://picsum.photos/id/236/500/300" alt="image">
<img src="https://picsum.photos/id/235/500/300" alt="image">
<img src="https://picsum.photos/id/234/500/300" alt="image">
<img src="https://picsum.photos/id/233/500/300" alt="image">
<img src="https://picsum.photos/id/23/500/300" alt="image">
</div>
<i class="fa-solid fa-angles-right right"></i>
<i class="fa-solid fa-angles-left left"></i>
</div>
<strong>
<script src="script.js"></script>
</body></strong>
CSS Part: JavaScript Image Slider
In index.css, we designed our container and buttons. We made
First, give border-property to ‘slider-container’ which is parent to our ‘image-container’, and make its position relative and make it overflow: hidden (means) all content outside of ‘slider-container’ will not be visible.
Display: flex to ‘image-container’ will make all images horizontal. Now our plan is to slide the position of images to the ‘slider-container’. Why? Because that image will come in ‘slider-container’ will be visible, and the rest will not be visible because of the ‘overflow: hidden’ property in ‘slider-container’.
.slide-container{
margin-top: 2px;
border-radius: 10px;
height: 300px;
width: 500px;
box-shadow: 6px 7px 30px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
}
.image-container{
display: flex;
transition: transform ease-in-out 1s ;
}
.slide-container i{
font-size: 20px;
opacity: 0.9;
position: absolute;
top: 50%;
color: rgb(239, 239, 239);
transform: translateY(-50%);
}
.left, .right{
left: 10px;
}
.slide-container i:hover{
cursor: pointer;
color: rgb(255, 255, 255);
opacity: 1;
}
JavaScript Part:
i) Access the elements of HTML using DOM manipulation.
a) nextEL is ‘next button for next image’, prevEl is ‘previous button for previous image’, imageEl is ‘image-container div’ of html and totImg is accessing all images of slider.
ii) Intuition: Our main aim is to make horizontally aligned image to move from that ‘slider-container’ window so that our only one image will be visible.
How to move? Using next and prev button. Hence, manipluate that nexEl and prevEl buttons using DOM.
iii) We are using setTimeout() to automate that moving effect after certain time so that image should move without pressing any button. Not only that, we press any button, we will use clearTimeout().
const nextEl=document.querySelector(".right")
const prevEl=document.querySelector(".left")
const imageEL=document.querySelector(".image-container")
const totImg=document.querySelectorAll("img")
let x;
let currImage=1;
nextEl.addEventListener("click",()=>{
currImage++;
clearTimeout(x);
updateImg();
})
prevEl.addEventListener("click",()=>{
currImage--;
clearTimeout(x);
updateImg();
})
function updateImg(){
if(currImage>totImg.length){
currImage=1;
}
if(currImage<1){
currImage=totImg.length;
}
imageEL.style.transform=`translateX(-${(currImage-1)*500}px)`
x=setTimeout(()=>{
currImage++;
updateImg();
},2000)
}
updateImg();
You can see this tutorial to understand it thoroughly:
Conclusion:
Creating an Image Slider JavaScript project is a fun and practical way to strengthen your frontend skills. It helps you understand how JavaScript interacts with HTML and CSS to make a webpage dynamic and user-friendly. Whether you’re building a portfolio, blog, or business site, sliders can enhance the user experience and visual appeal.
We hope this project helped you learn something new. Keep practicing and building more projects to sharpen your skills!
Get the code like via this github link: (Link)
For more project ideas and source code visit: (LINK)