Simple Image Slider in JavaScript with Arrows

This JavaScript code snippet helps you to create a simple image slider with arrows navigation. The slider comes with two arrows to move between the images. Basically, the slider contains the corresponding span with the image‘s title. Each span element hold the background image to display inside the slider with a caption.

How to Create a Simple Image Slider in JavaScript with Arrows

1.  In HTML, create a div with a class of "wrap". Add a div with an id of "arrow-left" and a class of "arrow" inside the wrap div. Similarly, create another div with an id  "slider" inside the wrap div. Inside the slider div, create three other divs with the classes "slide1", "slide2", and "slide3", respectively.

Likewise, create another div with a class  "slide-content" inside each of the three slide divs. Inside the slide-content div, place your slider content. After the slider div, create another div with an id of "arrow-right" and a class of "arrow". The following is the complete HTML structure for a simple image slider:

<div class="wrap">
  <div id="arrow-left" class="arrow"></div>
  <div id="slider">
    <div class="slide slide1">
      <div class="slide-content">
        <span>Image One</span>
      </div>
    </div>
    <div class="slide slide2">
      <div class="slide-content">
        <span>Image Two</span>
      </div>
    </div>
    <div class="slide slide3">
      <div class="slide-content">
        <span>Image Three</span>
      </div>
    </div>
  </div>
  <div id="arrow-right" class="arrow"></div>
</div>

In the CSS, target the body, #slider, wrap, and .slide-content classes and set the margin and padding to 0. Similarly, set the font–family, width, and height for all the elements. Define the position of the .wrap element to relative. Create three separate classes for each slide, .slide1, .slide2, and .slide3 and define the background–size, background–position, and background–repeat for the .slide class.

Set the display, flex–direction, justify–content, align–items, and text–align for the .slide–content class. Set the font–size, and color for the span that is within the .slide–content class. So, the following is the complete CSS code for the image slider:

body,
#slider,
.wrap,
.slide-content {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

.wrap {
  position: relative;
}

.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide1 {
  background-image: url("https://static.pexels.com/photos/302889/pexels-photo-302889.jpeg");
}
.slide2 {
  background-image: url("https://static.pexels.com/photos/302892/pexels-photo-302892.jpeg");
}
.slide3 {
  background-image: url("https://static.pexels.com/photos/226633/pexels-photo-226633.jpeg");
}

.slide-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.slide-content span {
  font-size: 5rem;
  color: #fff;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -35px;
  width: 0;
  height: 0;
  border-style: solid;
}

#arrow-left {
  border-width: 30px 40px 30px 0;
  border-color: transparent #fff transparent transparent;
  left: 0;
  margin-left: 30px;
}

#arrow-right {
  border-width: 30px 0 30px 40px;
  border-color: transparent transparent transparent #fff;
  right: 0;
  margin-right: 30px;
}

In JavaScript, declare a variable 'sliderImages' and assign it a query selector to select all elements with the class 'slide'. Similarly, declare variables 'arrowLeft' and 'arrowRight' and assign them query selectors to select the elements with the corresponding ids. Declare a variable 'current' and assign it a value of 0. Create a function with a name 'reset' to clear all images. Finally, create a function 'startSlide' to initialize the image slider:

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";
  }
}

// Init slider
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

// Show prev
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();

That’s all! hopefully, you have successfully created a simple image slider in HTML CSS and JavaScript with arrows navigation. If you have any questions or suggestions, feel free to comment below.