How to create image slider using HTML CSS and JavaScript ?

Last Updated : 22 Aug, 2024

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>
    <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=
"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();