Open In App

How to create image slider using HTML CSS and JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

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 and document.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 them sliderImages 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 the reset function to ensure a clean slate.
    • Define slideLeft and slideRight 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 or slideRight functions.
    • Finally, invoke the startSlide function to set up the initial state of the slider when the page loads.

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: 100vh;
    overflow-x: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
 
.slide1 {
    background-image: url(
}
 
.slide2 {
    background-image: url(
}
 
.slide3 {
    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

Image Slider



Last Updated : 22 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads