Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to create image slider using HTML CSS and JavaScript ?

  • Last Updated : 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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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=
    <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 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(
}
.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 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 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:

Image Slider




My Personal Notes arrow_drop_up
Recommended Articles
Page :