Simple JavaScript Image Slider Code

This JavaScript code snippet helps you to create a simple image slider with next and previous buttons. It displays images and captions. It helps showcase multiple images smoothly.

You can use this code on any website to showcase images attractively. It enhances user engagement by offering an interactive slideshow experience. It’s customizable and easy to integrate into your web projects.

How to Create a Simple Image Slider Using JavaScript

1. First of all, load the Google Fonts by adding the following CDN links into the head tag of your HTML document.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">

2. In HTML, create a <div> element with the class “carousel-container”. Inside this container, add another <div> with the class “carousel-imgs”. Inside the “carousel-imgs” div, add <img> tags for each image you want to include in your slider. You can also add navigation buttons and slide numbers if desired.

<div class="carousel-container">
  <div class="carousel-imgs">
  <img src="https://i.imgur.com/3rCW1xj.png" class="carousel-img visible"/>
  <img src="https://i.imgur.com/AsXzjqX.png" class="carousel-img  hidden"/>
  <img src="https://i.imgur.com/aJndu7X.png" class="carousel-img  hidden"/>
  </div>
    <a class="prev arrow">&#10094;</a>
    <a class="next arrow">&#10095;</a>
  <div class="slide-numbers">
      <span class="dot active"></span>
      <span class="dot"></span>
      <span class="dot"></span>
  </div>
  
</div>
<div class="carousel-captions">
  <p class="carousel-caption visible">Mountain Range 1</p>
  <p class="carousel-caption hidden">Mountain Range 2</p>
  <p class="carousel-caption hidden">Mountain Range 3</p>
  </div>

3. After that, add CSS styling to your HTML to make your image slider visually appealing and responsive. You can customize the styling to match your website’s design preferences. Ensure that the carousel container and images are properly positioned and styled for a smooth user experience.

*{
  margin:0;
}

.carousel-container{
  position:relative;
  margin:1em auto .5em auto;
  max-width:600px;
}
.carousel-container, .carousel-caption{
  box-shadow: 0 0 5px rgb(204,204,204);;
}
.carousel-container img{
border-radius:.5em;
}
.hidden{
  display:none;
}
.visible{
  display:block;
}
.arrow{
  display:inline;
}

.prev, .arrow{
 cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin: -1.5em .3em 0 .3em;
  padding: 1em;
  color: white;
  font-weight: bold;
  font-size: 1.2em;
  transition: 0.3s ease;
  border-radius: .5em;
  user-select: none;
  background-color:rgba(204,204,204, 0.3);
}
.next {
  right:0 ;
}
.prev:hover, .next:hover{
  box-shadow: 0 0 5px #fff;
  border:1px solid #fff;
}
.slide-numbers{
  text-align: center;
  position:absolute;
  bottom:1em;
  left:45%;

}
.dot{
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: rgba(204,204,204, 0.3);
  border-radius: 50%;
  display: inline-block;
} 

.dot:hover, .active{
  background-color: rgb(204,204,204);
  height: 12px;
  width: 12px;
}
.dot:hover{
   box-shadow: 0 0 5px #fff;
}
.carousel-caption{
  text-align: center;
  font-family:'Nanum Gothic',serif;
  background-color: rgba(204,204,204,.8);
  max-width:600px;
  margin:.5em auto;
  padding:1em 0;
  border-radius:.5em;
}

4. Finally, create a new JavaScript file and link it to your HTML document. In the JavaScript file, define variables to select the necessary HTML elements such as images, navigation buttons, and slide numbers. Then, add event listeners to the navigation buttons to allow users to navigate between images. Implement functions to update the position of the slider when a navigation button is clicked.

// Variables
let prev = document.querySelector('.prev');
let next = document.querySelector('.next');
let imgs = document.querySelectorAll('.carousel-img');
let dots = document.querySelectorAll('.dot');
let captions = document.querySelectorAll('.carousel-caption')
let totalImgs = imgs.length;
let imgPosition = 0;

// Event Listeners
next.addEventListener('click', nextImg);
prev.addEventListener('click', prevImg);

// Update Position
function updatePosition (){
//   Images
  for(let img of imgs){
    img.classList.remove('visible');
    img.classList.add('hidden');
  }
  imgs[imgPosition].classList.remove('hidden');
  imgs[imgPosition].classList.add('visible')
//   Dots
  for (let dot of dots) {
     dot.className = dot.className.replace(" active", "");
  }
    dots[imgPosition].classList.add('active');
//   Captions
  for (let caption of captions) {
      caption.classList.remove('visible');
      caption.classList.add('hidden');
  }
    captions[imgPosition].classList.remove('hidden');
    captions[imgPosition].classList.add('visible')
}

// Next Img
function nextImg(){
  if (imgPosition === totalImgs -1){
        imgPosition = 0;
    } else{
        imgPosition++;
    }
    updatePosition();
}
//Previous Image
function prevImg(){
  if (imgPosition === 0){
        imgPosition = totalImgs-1;
    } else{
        imgPosition--;
    }
    updatePosition();
}

// Dot Position
dots.forEach((dot, dotPosition) => {
  dot.addEventListener("click", () => {
    imgPosition = dotPosition
    updatePosition(dotPosition)
  })
})

That’s all! hopefully, you have successfully integrated this JavaScript code into your project to create a simple image slider. If you have any questions or suggestions, feel free to comment below.