Home > Software design >  make each thumbnail correspond with display image
make each thumbnail correspond with display image

Time：06-17

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;
}
<div id="main_wrapper">
  <div id="slides_wrapper">
    <div id="slide_left" ><span>&#10094;</span></div>
    <div id="slides">
      <img  src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
      <img  src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
      <img  src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
      <img  src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
      <img  src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
      <img  src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    </div>
    <div id="slide_right" ><span>&#10095;</span></div>
  </div>
  <div id="thumbnails">
    <img  src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <img  src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <img  src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <img  src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <img  src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <img  src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
  </div>
</div>

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

CodePudding user response：

Step

  1. You need to get list of thumbnails and set active number variable to put initial number of thumbnail shown
  2. When user click left, decrement the active number and set it to length of thumbails when reach lowest value
  3. When user click right, increment the active number and reset it when reach lowest value.
  4. 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;
}
<div id="main_wrapper">
  <div id="slides_wrapper">
    <div id="slide_left" ><span>&#10094;</span></div>
    <div id="slides">
      <img  src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
      <img  src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
      <img  src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
      <img  src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
      <img  src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
      <img  src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    </div>
    <div id="slide_right" ><span>&#10095;</span></div>
  </div>
  <div id="thumbnails">
    <img  src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <img  src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <img  src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <img  src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <img  src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <img  src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
  </div>
</div>

CodePudding user response：

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;
}
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <div id="main_wrapper">
      <div id="slides_wrapper">
        <div id="slide_left" ><span>&#10094;</span></div>
        <div id="slides">
          <img
            data-index="0"
            
            src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
          />
          <img
            data-index="1"
            
            src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
          />
          <img
            data-index="2"
            
            src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
          />
          <img
            data-index="3"
            
            src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
          />
          <img
            data-index="4"
            
            src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
          />
          <img
            data-index="5"
            
            src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
          />
        </div>
        <div id="slide_right" ><span>&#10095;</span></div>
      </div>
      <div id="thumbnails">
        <img
          data-index="0"
          
          src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
        />
        <img
          data-index="1"
          
          src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
        />
        <img
          data-index="2"
          
          src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
        />
        <img
          data-index="3"
          
          src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
        />
        <img
          data-index="4"
          
          src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
        />
        <img
          data-index="5"
          
          src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
        />
      </div>
    </div>

    <script src="./script.js"></script>
  </body>
</html>

Page link：https//www.codepudding.com/Softwaredesign/445324.html

Prev:Center icons and text on the same y axis
Next:How to display image using django
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding