In this article, we will create an image slider using HTML, CSS, and JavaScript,
HTML, and CSS design the HTML page with five HTML divs, a left arrow, three slides, and a right arrow with ids or classes as arrow-left, slide1, slide2, slide3, and arrow-right. By clicking these arrows, we can see these image slides by using user-defined JavaScript functions like slideLeft() and slideRight(). These functions use the addEventListener() method in JavaScript which takes the click event of arrows to listen for.
Approach: In this approach with the help of HTML CSS and javascript we are creating an image slider, here are some steps to create a slider:
HTML Section: This section contains the HTML portion of the page. The slides that have to be shown are defined with their corresponding text.
CSS Section: This section consists of all the styling that would be used to make the slideshow. The left and right arrows to be used to move each of the slides are defined by setting the margin-left and margin-right properties as required for every slide. This gives it the appearance of an image slider. All the slides have background-image as the URL to the images used in the slider.
JavaScript Section: This section handles user-defined JavaScript functions like slideLeft() and slideRight().The se functions use the addEventListener() method in JavaScript which takes the click event of arrows to listen for. The following code is the content for the file “script.js” used in the above HTML code.
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= <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;} |
Javascript
let sliderImages = document.querySelectorAll(".slide"), arrowLeft = document.querySelector("#arrow-left"), arrowRight = document.querySelector("#arrow-right"), current = 0;// Clear all imagesfunction reset() { for (let i = 0; i < sliderImages.length; i++) { sliderImages[i].style.display = "none"; }}// Initial slidefunction startSlide() { reset(); sliderImages[0].style.display = "block";}// Show previousfunction slideLeft() { reset(); sliderImages[current - 1].style.display = "block"; current--;}// Show nextfunction slideRight() { reset(); sliderImages[current + 1].style.display = "block"; current++;}// Left arrow clickarrowLeft.addEventListener("click", function () { if (current === 0) { current = sliderImages.length; } slideLeft();});// Right arrow clickarrowRight.addEventListener("click", function () { if (current === sliderImages.length - 1) { current = -1; } slideRight();});startSlide(); |
Output: Click here to see live code output
Image Slider
