Open In App

How to create image slider using HTML CSS and JavaScript ?

Last Updated : 18 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

An image slide, or slideshow, is a dynamic display of images that automatically transitions from one to the next, often with animations. To create an image slide, use HTML to structure the images, CSS for styling and animations, and JavaScript to control the timing and transitions between images.

Approach

  • HTML Structure: The HTML structure includes three image slides wrapped in div elements, along with left and right arrow controls for navigation.
  • CSS for Slide Styling: Each slide is styled with full viewport height, background images, and positioning, ensuring smooth transitions and visibility.
  • CSS for Arrow Controls: Arrow controls are styled using absolute positioning, with custom borders to create triangle-like arrows for navigation.
  • JavaScript Logic for Slide Initialization: The startSlide() function resets all slides and shows the first image as the initially visible slide when the page loads.
  • JavaScript Logic for Navigating Left: The slideLeft() function decrements the current index, shows the previous slide, and loops back to the last slide if necessary.
  • JavaScript Logic for Navigating Right: The slideRight() function increments the current index, displays the next slide, and loops back to the first slide when reaching the end.

Example: In this example, we are using the above-explained approach.

HTML 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
    <script src=
        "https://code.jquery.com/jquery-3.6.0.min.js ">
    </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(
"https://media.geeksforgeeks.org/wp-content/uploads/20210812221217/pic1.png");
}

.slide2 {
    background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210812221254/pic2.png");
}

.slide3 {
    background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210812221322/pic3.png");
}

.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;
}
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();

Output

ezgif717cf202e3377

How to create image slider using HTML CSS and JavaScript ?

S
sifa199910
Improve
Article Tags :

Explore

Lightbox