How to create image slider using HTML CSS and JavaScript ? (original) (raw)

Last Updated : 18 Apr, 2025

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 `

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