In this article, we’re going to learn, how to create an image slider using HTML CSS, and JavaScript.
Approach
- Use HTML to structure your project.
- Use CSS for styling
-
Now in JavaScript:
-
Query and store references to relevant HTML elements using
document.querySelector
anddocument.querySelectorAll
. The images, left arrow, and right arrow are selected. -
Declare and initialize variables (
sliderImages
,arrowLeft
,arrowRight
,current
) to manage the state of the image slider. -
Implement a
reset
function to hide all images by iterating through themsliderImages
and setting their display property to “none”. -
Create a
startSlide
function to set up the initial state of the slider by displaying the first image. It calls thereset
function to ensure a clean slate. -
Define
slideLeft
andslideRight
functions to show the previous and next images, respectively. They reset the display and set the appropriate image to be visible. -
Attach event listeners to the left and right arrow buttons. These listeners check for the slider’s boundaries and call the corresponding
slideLeft
orslideRight
functions. -
Finally, invoke the
startSlide
function to set up the initial state of the slider when the page loads.
-
Query and store references to relevant HTML elements using
Example: In this example, we are using the above-explained approach.
Javascript
let sliderImages = document.querySelectorAll( ".slide" ),
arrowLeft = document.querySelector( "#arrow-left" ),
arrowRight = document.querySelector( "#arrow-right" ),
current = 0;
// Clear all images function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none" ;
}
} // Initial slide function startSlide() {
reset();
sliderImages[0].style.display = "block" ;
} // Show previous function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block" ;
current--;
} // Show next function slideRight() {
reset();
sliderImages[current + 1].style.display = "block" ;
current++;
} // Left arrow click arrowLeft.addEventListener( "click" , function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
}); // Right arrow click arrowRight.addEventListener( "click" , function () {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
}); startSlide(); |
HTML
<!DOCTYPE html> < html >
< head >
< meta charset = "utf-8" />
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
< title >Image Slider</ title >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" />
< link rel = "stylesheet" href =
< script src =
</ script >
< link rel = "stylesheet" href = "style.css" />
< script src = "script.js" ></ script >
</ head >
< body >
< div id = "arrow-left" class = "arrow" ></ div >
< div class = "slide slide1" ></ div >
< div class = "slide slide2" ></ div >
< div class = "slide slide3" ></ div >
< div id = "arrow-right" class = "arrow" ></ div >
</ body >
</ html >
|
CSS
.slide { margin : 0 ;
padding : 0 ;
font-family : Arial , Helvetica , sans-serif ;
width : 100% ;
height : 100 vh;
overflow-x: hidden ;
background- size : cover;
background-position : center ;
background-repeat : no-repeat ;
} .slide 1 {
background-image : url (
} .slide 2 {
background-image : url (
} .slide 3 {
background-image : url (
} .arrow { cursor : pointer ;
position : absolute ;
top : 50% ;
margin-top : -35px ;
width : 0 ;
height : 0 ;
border-style : solid ;
} #arrow- left {
border-width : 20px 30px 20px 0 ;
border-color : transparent #fff transparent transparent ;
left : 0 ;
margin-left : 20px ;
} #arrow- right {
border-width : 20px 0 20px 30px ;
border-color : transparent transparent transparent #fff ;
right : 0 ;
margin-right : 20px ;
} |
Output: Click here to see live code output