make each thumbnail correspond with display image

Question

I made this image slider up to this level and I think I need some help.

I created an image slider with arrows, and thumbnails at the bottom of the display slider. The display slider works just fine, only that from the JavaScript code I've written, I can't seem to make each thumbnail correspond with the display image slider.

My intention for this slider to work was that: when a thumbnail is clicked, it would reflect in the display slider. Also, when the left or right arrow of the display slider is clicked, the corresponding thumbnail becomes active. And finally, with a fade transitioning, maybe?

See the code I wrote:

let leftArrow = document.querySelector('#slide_left')
let rightArrow = document.querySelector('#slide_right')
let slidesContainer = document.querySelector('#slides')

leftArrow.addEventListener('click', function() {
  const last = document.querySelector('#slides > :last-child');
  last.remove();
  slidesContainer.prepend(last);
})

rightArrow.addEventListener('click', function() {
  const first = document.querySelector('#slides > :first-child');
  first.remove();
  slidesContainer.append(first);
})

* {
  box-sizing: border-box;
}

body {
  background-color: #555;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
}

div#slides_wrapper {
  width: 400px;
  display: flex;
  border: 2px solid #efefef;
  justify-content: space-between;
  margin-bottom: 20px;
}

div#slides_wrapper div#slides {
  width: 300px;
  overflow: hidden;
  display: flex;
  background-color: #0ff3;
}

img.slide {
  width: 100%;
}

img.thumbnail {
  width: 50px;
}

div.slide_arrow {
  font-size: 20px;
  background-color: #0f0f0f;
  color: #f0f0f0;
  height: 40px;
  width: 40px;
  display: grid;
  justify-items: center;
  align-items: center;
  align-self: center;
}

div.slide_arrow:hover {
  cursor: pointer;
}

div.slide_arrow#slide_left {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

div.slide_arrow#slide_right {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

div#thumbnails {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

div#thumbnails img.thumbnail {
  background-color: #888;
  margin: 5px;
}

div#thumbnails img.thumbnail:hover {
  cursor: pointer;
}

div#thumbnails img.thumbnail.active {
  border: 2px solid #0ff;
}

Please feel free to alter the code, if need be. I really need help.

user_17488015 · Answer

Try to use data attribute to help with indexing. I add a listener to the thumbnail so it displays the corresponding image.

let leftArrow = document.querySelector("#slide_left");
let rightArrow = document.querySelector("#slide_right");
let slidesContainer = document.querySelector("#slides");

let applyThumbnail = function (dataIdx) {
  document.querySelector("#thumbnails > img.active").classList.remove("active");
  document
    .querySelector(`#thumbnails > [data-index='${parseInt(dataIdx)}']`)
    .classList.add("active");
};

let thumbnailClick = function (dataIdx) {
  document.querySelector("#thumbnails > img.active").classList.remove("active");
  document
    .querySelector(`#thumbnails > [data-index='${parseInt(dataIdx)}']`)
    .classList.add("active");
  document.querySelector(`#slides > img.active`).classList.remove("active");
  document
    .querySelector(`#slides > [data-index='${parseInt(dataIdx)}']`)
    .classList.add("active");
};

leftArrow.addEventListener("click", function () {
  const currentActive = document.querySelector("#slides > img.active");
  const prevSibling = currentActive.previousElementSibling;
  currentActive.classList.remove("active");
  if (prevSibling) {
    // Select Prev Image
    prevSibling.classList.add("active");
    applyThumbnail(prevSibling.getAttribute("data-index"));
  } else {
    // Select Last Image
    const last = document.querySelector("#slides > :last-child");
    last.classList.add("active");
    applyThumbnail(last.getAttribute("data-index"));
  }
});

rightArrow.addEventListener("click", function () {
  const currentActive = document.querySelector("#slides > img.active");
  const nextSibling = currentActive.nextElementSibling;
  currentActive.classList.remove("active");
  if (nextSibling) {
    // Select Next Image
    nextSibling.classList.add("active");
    applyThumbnail(nextSibling.getAttribute("data-index"));
  } else {
    // Select First Image
    const first = document.querySelector("#slides > :first-child");
    first.classList.add("active");
    applyThumbnail(first.getAttribute("data-index"));
  }
});

document.querySelectorAll(".thumbnail").forEach(function (elem) {
  elem.addEventListener("click", function () {
    thumbnailClick(this.getAttribute("data-index"));
  });
});

* {
  box-sizing: border-box;
}

body {
  background-color: #555;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
}

div#slides_wrapper {
  width: 400px;
  display: flex;
  border: 2px solid #efefef;
  justify-content: space-between;
  margin-bottom: 20px;
}

div#slides_wrapper div#slides {
  width: 300px;
  overflow: hidden;
  display: flex;
  background-color: #0ff3;
}

img.slide {
  width: 100%;
  display: none;
}

img.slide.active {
  display: block;
}

img.thumbnail {
  width: 50px;
}

div.slide_arrow {
  font-size: 20px;
  background-color: #0f0f0f;
  color: #f0f0f0;
  height: 40px;
  width: 40px;
  display: grid;
  justify-items: center;
  align-items: center;
  align-self: center;
}

div.slide_arrow:hover {
  cursor: pointer;
}

div.slide_arrow#slide_left {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

div.slide_arrow#slide_right {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

div#thumbnails {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

div#thumbnails img.thumbnail {
  background-color: #888;
  margin: 5px;
}

div#thumbnails img.thumbnail:hover {
  cursor: pointer;
}

div#thumbnails img.thumbnail.active {
  border: 2px solid #0ff;
}


  
    Parcel Sandbox
    

    
  

  
    
      
        ❮
        
          
          
          
          
          
          
        
        ❯

user_7207817 · Answer

Step

You need to get list of thumbnails and set active number variable to put initial number of thumbnail shown
When user click left, decrement the active number and set it to length of thumbails when reach lowest value
When user click right, increment the active number and reset it when reach lowest value.
Each click will clean current active class first

CODE:

let leftArrow = document.querySelector('#slide_left')
let rightArrow = document.querySelector('#slide_right')

let slidesContainer = document.querySelector('#slides')
let thumbnailContainer = document.querySelector('#thumbnails')

let thumbnails = document.getElementsByClassName('thumbnail')
let activeThumbnailNumber = 0

const removeAllActiveThumbnail = () => {
  for (let index = 0; index < thumbnails.length; index++) {
    thumbnails[index].classList.remove("active");; 
  }
}

leftArrow.addEventListener('click', function() {
  const lastSlide = document.querySelector('#slides > :last-child');
  lastSlide.remove();
  slidesContainer.prepend(lastSlide);
 
  if (activeThumbnailNumber == 0) {
    activeThumbnailNumber = thumbnails.length -1
  } else {
    activeThumbnailNumber--
  }
  removeAllActiveThumbnail()
  thumbnails[activeThumbnailNumber].classList.add('active')
})

rightArrow.addEventListener('click', function() {
  const firstSlide = document.querySelector('#slides > :first-child');
  firstSlide.remove();
  slidesContainer.append(firstSlide);
  
  if (activeThumbnailNumber === thumbnails.length -1) {
    activeThumbnailNumber = 0
  } else {
    activeThumbnailNumber++
  }
  removeAllActiveThumbnail()
  thumbnails[activeThumbnailNumber].classList.add('active')
})

* {
  box-sizing: border-box;
}

body {
  background-color: #555;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
}

div#slides_wrapper {
  width: 400px;
  display: flex;
  border: 2px solid #efefef;
  justify-content: space-between;
  margin-bottom: 20px;
}

div#slides_wrapper div#slides {
  width: 300px;
  overflow: hidden;
  display: flex;
  background-color: #0ff3;
}

img.slide {
  width: 100%;
}

img.thumbnail {
  width: 50px;
}

div.slide_arrow {
  font-size: 20px;
  background-color: #0f0f0f;
  color: #f0f0f0;
  height: 40px;
  width: 40px;
  display: grid;
  justify-items: center;
  align-items: center;
  align-self: center;
}

div.slide_arrow:hover {
  cursor: pointer;
}

div.slide_arrow#slide_left {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

div.slide_arrow#slide_right {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

div#thumbnails {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

div#thumbnails img.thumbnail {
  background-color: #888;
  margin: 5px;
}

div#thumbnails img.thumbnail:hover {
  cursor: pointer;
}

div#thumbnails img.thumbnail.active {
  border: 2px solid #0ff;
}

user_19258933 · Answer

I kind of found a way to make it fade based on David Y's answer. To be a bit more precise as to how I achieved it. All the changes I made were in the CSS. Setting the immediate container of the image slides to the position of relative and the slides themselves to the position of absolute. Also, using the top, left, width, and height properties to make them stay in the container. As well as the z-index property for opacity I guess.

let leftArrow = document.querySelector("#img_slide_left");
let rightArrow = document.querySelector("#img_slide_right");
let slidesContainer = document.querySelector("#img_slides");

let applyThumbnail = function(dataIdx) {
  document.querySelector("#img_thumbnails > img.active").classList.remove("active");
  document.querySelector(`#img_thumbnails > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
};

let thumbnailClick = function(dataIdx) {
  document.querySelector("#img_thumbnails > img.active").classList.remove("active");
  document.querySelector(`#img_thumbnails > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
  document.querySelector(`#img_slides > img.active`).classList.remove("active");
  document.querySelector(`#img_slides > [data-index='${parseInt(dataIdx)}']`).classList.add("active");
};

leftArrow.addEventListener("click", function() {
  const currentActive = document.querySelector("#img_slides > img.active");
  const prevSibling = currentActive.previousElementSibling;

  currentActive.classList.remove("active");

  if (prevSibling) {
    // Select Prev Image
    prevSibling.classList.add("active");
    applyThumbnail(prevSibling.getAttribute("data-index"));
  } else {
    // Select Last Image
    const last = document.querySelector("#img_slides > :last-child");
    last.classList.add("active");
    applyThumbnail(last.getAttribute("data-index"));
  }
});

rightArrow.addEventListener("click", function() {
  const currentActive = document.querySelector("#img_slides > img.active");
  const nextSibling = currentActive.nextElementSibling;

  currentActive.classList.remove("active");

  if (nextSibling) {
    // Select Next Image
    nextSibling.classList.add("active");
    applyThumbnail(nextSibling.getAttribute("data-index"));
  } else {
    // Select First Image
    const first = document.querySelector("#img_slides > :first-child");
    first.classList.add("active");
    applyThumbnail(first.getAttribute("data-index"));
  }
});

document.querySelectorAll(".imgThumbnail").forEach(function(elem) {
  elem.addEventListener("click", function() {
    thumbnailClick(this.getAttribute("data-index"));
  });
});

* {
  box-sizing: border-box;
}

body {
  background-color: #555;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
}

div#img_slides_wrapper {
  width: 400px;
  height: 250px;
  display: flex;
  border: 2px solid #efefef;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
}

div#img_slides_wrapper div#img_slides {
  overflow: hidden;
  display: flex;
  background-color: #0ff3;
}

img.imgSlide {
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  transition-property: opacity;
  transition-duration: 750ms;
  transition-timing-function: ease;
}

img.imgSlide.active {
  opacity: 1;
}

img.imgThumbnail {
  width: 50px;
}

div.img_slide_arrow {
  color: transparent;
  height: inherit;
  width: 40px;
  position: absolute;
  z-index: 2;
}

div.img_slide_arrow:hover {
  cursor: pointer;
}

div.img_slide_arrow:hover>span {
  font-size: 20px;
  color: #ffffff;
  height: 40px;
  width: 40px;
  display: grid;
  justify-items: center;
  align-items: center;
  background-color: #00000033;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

div.img_slide_arrow#img_slide_left {}

div.img_slide_arrow#img_slide_right {
  right: 0;
}

div.img_slide_arrow#img_slide_left span {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

div.img_slide_arrow#img_slide_right span {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  right: 0;
}

div#img_thumbnails {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

div#img_thumbnails img.imgThumbnail {
  background-color: #888;
  margin: 5px;
}

div#img_thumbnails img.imgThumbnail:hover {
  cursor: pointer;
}

div#img_thumbnails img.imgThumbnail.active {
  border: 2px solid #0ff;
}

Just thought it was okay to share my petite knowledge. :)

make each thumbnail correspond with display image

3 Answers

Step

CODE: