How to create image slider using HTML CSS and JavaScript ?

20 Aug, 2021
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, left arrow, three slides, and 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.
Example: HTML Section: This section contains the HTML portion of the page. The slides that have to be shown are defined with their corresponding text.
 
index.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 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. The following code is the content for the file “style.css” used in the above HTML code.
style.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 Section: This section handles the 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.
main.js
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:
Image Slider
CSS-Properties
CSS-Questions
HTML-Questions
HTML-Tags
JavaScript-Methods
JavaScript-Questions
Picked
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.