Multiple Image Slider in HTML Source Code

Multiple Image Slider in HTML Source Code
Project: Multiple images dot slider in plain JS
Author: Suraj Radhakrishnan
Edit Online: View on CodePen
License: MIT

This HTML & JavaScript source code helps you to create a multiple-image slider. The slider comes with cards and dots navigation to navigate the images. It uses a click event listener for each dot to shift the cards’ wrapper to the selected card and update the active dot accordingly. The code uses the wrapper’s parent’s client width to ensure that only a portion of the cards is displayed at any given time, and the overflow is hidden to ensure the wrapper does not overflow the container. Finally, it sets the initial active dot as the first dot in the array.

How to Create Multiple Image Slider in HTML Source Code

Create the HTML structure for the image sliders.The div with class (dots wrapper) contains a set of buttons with a class dot. These buttons are typically used for navigation purposes.

<div class="display-area">
  <div class="cards-wrapper">
    
    <div class="card"><img src="https://picsum.photos/200?random=1" alt=""></div>
    <div class="card"><img src="https://picsum.photos/200?random=2" alt=""></div>  
    <div class="card"><img src="https://picsum.photos/200?random=3" alt=""></div>
    <div class="card"><img src="https://picsum.photos/200?random=4" alt=""></div>

    <div class="card"><img src="https://picsum.photos/200?random=5" alt=""></div>
    <div class="card"><img src="https://picsum.photos/200?random=6" alt=""></div>  
    <div class="card"><img src="https://picsum.photos/200?random=7" alt=""></div>
    <div class="card"><img src="https://picsum.photos/200?random=8" alt=""></div>
    
    <div class="card"><img src="https://picsum.photos/200?random=9" alt=""></div>
    <div class="card"><img src="https://picsum.photos/200?random=10" alt=""></div>  
    <div class="card"><img src="https://picsum.photos/200?random=11" alt=""></div>
    <div class="card"><img src="https://picsum.photos/200?random=12" alt=""></div>
    
    <div class="card"><img src="https://picsum.photos/200?random=13" alt=""></div>
    <div class="card"><img src="https://picsum.photos/200?random=14" alt=""></div>  
    <div class="card"><img src="https://picsum.photos/200?random=15" alt=""></div>
    <div class="card"><img src="https://picsum.photos/200?random=16" alt=""></div>
  </div> 
</div>

<div class="dots-wrapper">
  <button class="dot active"></button>
  <button class="dot"></button>
  <button class="dot"></button>
  <button class="dot"></button>
</div>

Style the slider using the following CSS styles:

.card {
  height: 200px;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 40px;
  margin: 10px;
  flex: 200px 0 0;
}
.cards img {
    width: 100%;
    object-fit: cover;
}
.cards-wrapper {
  display: flex; 
  transition: ease 0.5s;
}
.display-area {
  width: 880px;
/*   border: 1px solid black; */
  overflow-x: hidden;
  margin: auto;
}

.dots-wrapper {
  display: flex;
  justify-content: center;
  margin: auto;
}

.dot {
  border: none;
  background: rgba(0, 0, 0, 0.2);
  width: 20px;
  height: 20px;
  margin: 5px;
  border-radius: 50%;
  outline: none;
}
.dot:hover {
  background: rgba(0, 0, 0, 0.3);
}
.dot.active {
  background: rgba(0, 0, 0, 0.5);
}

Finally, add the following JavaScript function to activate the image slider. This code complements the HTML code to create an image gallery or slider with navigation dots.

// In HTML, .display-area has the width of 4 cards = 880px. Each card is 200px width and margin set to 10px.
// .display-area has a .cards-wrapper which contains all the cards. .cards-wrapper is set to display flex.
// .display-area has overflow hidden to hide the portion of cards-wrapper which extends beyond the container's width.

const wrapper = document.querySelector('.cards-wrapper');
// console.log(wrapper.clientWidth);

// grab the dots
const dots = document.querySelectorAll('.dot');
// the default active dot num which is array[0]
let activeDotNum = 0;

dots.forEach((dot, idx) => {  
//   number each dot according to array index
  dot.setAttribute('data-num', idx);
  
//   add a click event listener to each dot
  dot.addEventListener('click', (e) => {
    
    let clickedDotNum = e.target.dataset.num;
    // console.log(clickedDotNum);
//     if the dot clicked is already active, then do nothing
    if(clickedDotNum == activeDotNum) {
      // console.log('active');
      return;
    }
    else {
      // console.log('not active');
      // shift the wrapper
      let displayArea = wrapper.parentElement.clientWidth;
      // let pixels = -wrapper.clientWidth * clickedDotNum;
      let pixels = -displayArea * clickedDotNum
      wrapper.style.transform = 'translateX('+ pixels + 'px)';
//       remove the active class from the active dot
      dots[activeDotNum].classList.remove('active');
//       add the active class to the clicked dot
      dots[clickedDotNum].classList.add('active');
//       now set the active dot number to the clicked dot;
      activeDotNum = clickedDotNum;
    }
    
  });
});

That’s all! hopefully, you have successfully created multiple image sliders using this HTML, CSS, and JavaScript source code. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply