沙盒模式

Question

快速注：这是一个我要说的项目（以0到100的比例）我设法在92处完成。因此，无需使用整个代码。 （如果需要的话，您可以。）

我可以称其为：映像滑块，图片库， static slider ，静态旋转木制，或者， 静态图像滑块旋转木马画廊（无论那是什么意思）。

只是想到图像沙盒可以节省一些命名压力。

我目前是一个小型团队的一部分，开发一个非常需要此组件的网站。 （就像我之前说的那样，我快要完成了，只需要帮助才能完成。）

----------------------------------------------------------------------- - 那是什么？ -----------------------------------------

我做了两个沙盒，默认情况下一个是可见的另一个是隐藏。第一个具有主显示，显示缩略图悬停。当您单击主显示器时，它会揭示一个具有另一个沙盒的模态（与默认的模盒有很大不同）。

-----------------------------------------当前情况如何？ ---------------------------------------

当前，当我单击第一个沙盒的显示图像时，模态的主显示向我展示了一个不同的图像，而不是我在第一个沙盒中单击的最后一个图像。

---------------------------------------您想要什么？ -------------------------------

I want the image which is active on the main display of the first sandbox< /strong>在单击它时，将自动显示为模态主显示器中的默认图像。

也就是说，在单击第一个沙盒的主要显示， 中的最后一个图像中，在单击它之前，，也应该是模态主显示器上的默认一个。当然，相应的缩略图应活跃。

查看我写的代码：

/* ========== begin ========== MODAL INITIALISATION SCRIPT ========== begin ========== */
let modalBtn = document.getElementById('featured')
let modal = document.getElementById('sandbox_modal')

modalBtn.addEventListener('click', () => {
  modal.classList.add('sandbox_modal_on')
})

window.onclick = (e) => {
  if (e.target.matches('#sandbox_modal')) {
    modal.classList.remove('sandbox_modal_on')
  }
}
/* ========== end ========== MODAL INITIALISATION SCRIPT ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX SCRIPT (DEFAULT) ========== begin ========== */
let thumbnails = document.getElementsByClassName('thumbnail')
let activeImages = document.getElementsByClassName('active')

for (var i = thumbnails.length - 1; i >= 0; i--) {
  let thumbnail = thumbnails[i]

  thumbnail.addEventListener('mouseenter', function() {
    if (activeImages.length > 0) {
      activeImages[0].classList.remove('active')
    }

    this.classList.add('active')
    document.getElementById('featured').src = this.src
  })
}

/* eventListener to run the script at the start and hdie left button automatically */
window.addEventListener("load", change);
var slidesAmount = document.querySelectorAll('#slider .thumbnail').length;
var slidesPerScreen = 4;
var currentSlideCounter = 1;
var maxSlideCounter = slidesAmount - slidesPerScreen + 1;

let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')

let container = document.getElementById('slider')

buttonLeft.addEventListener('click', function() {
  container.scrollLeft -= 70;

  if (currentSlideCounter > 1) {
    currentSlideCounter -= 1;
  }
  change();
})

buttonRight.addEventListener('click', function() {
  container.scrollLeft += 70;

  if (currentSlideCounter < maxSlideCounter) {
    currentSlideCounter += 1;
  }
  change();
})

function change() {
  switch (currentSlideCounter) {
    case 1:
      document.querySelector('#slide_left').classList.add('changes');
      if (maxSlideCounter == 2) {
        document.querySelector('#slide_right').classList.remove('changes');
      }
      break;

    case maxSlideCounter:
      document.querySelector('#slide_right').classList.add('changes');
      if (maxSlideCounter == 2) {
        document.querySelector('#slide_left').classList.remove('changes');
      }
      break;

    default:
      document.querySelectorAll('.slide_arrow').forEach(el => el.classList.remove('changes'));
      break;
  }
  /* this fixes the issue you addressed */
  if (slidesAmount <= slidesPerScreen) {
    document.querySelectorAll('.slide_arrow').forEach(el => el.classList.add('changes'));
  }
}
/* ========== end ========== IMAGE SANDBOX SCRIPT (DEFAULT) ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX SCRIPT (MODAL) ========== begin ========== */
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"));
  });
});
/* ========== end ========== IMAGE SANDBOX SCRIPT (MODAL) ========== end ========== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #bbbbbb;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
  font-family: "Helvetica";
}


/* ========== begin ========== MODAL INITIALISATION STYLING ========== begin ========== */

div#sandbox_modal {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000d;
  display: grid;
  /*align-items: center;*/
  justify-items: center;
  opacity: 0;
  visibility: hidden;
  transition-property: opacity visibility;
  transition-duration: 750ms;
  transition-timing-function: ease;
}

div#sandbox_modal.sandbox_modal_on {
  opacity: 1;
  visibility: visible;
}

div#sandbox_modal div#sandbox_modal_body {
  height: 100%;
  width: fit-content;
  background-color: #ddddddcc;
  display: grid;
  align-items: center;
}


/* ========== end ========== MODAL INITIALISATION STYLING ========== end ========== */


/* ========== begin ========== IMAGE SANDBOX STYLING ========== begin ========== */

div#product_img_bx {}

img#featured {
  width: 400px;
  height: 250px;
  cursor: zoom-in;
  border: 2px solid #ffffff;
}

div#slide_wrapper {
  width: inherit;
  display: flex;
  justify-content: space-between;
  height: fit-content;
  margin-top: 10px;
}

div#slider {
  width: 270px;
  display: flex;
  height: fit-content;
  flex-wrap: nowrap;
  overflow: hidden;
  /*background-color: #444444;*/
}

img.thumbnail {
  min-width: 60px;
  height: 40px;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid #ffffff;
}

img.thumbnail:not(:last-child) {
  margin-right: 10px;
}

img.thumbnail:hover,
img.thumbnail.active {
  opacity: 1;
}

div#slide_wrapper>div.slide_arrow {
  height: 30px;
  width: 30px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #000;
  font-size: 15px;
  border-radius: 50%;
}

div#slide_wrapper>div.slide_arrow:hover {
  cursor: pointer;
}


/* this CSS line applies changes with the JS script */

div.slide_arrow.changes {
  visibility: hidden;
}


/* ========== end ========== IMAGE SANDBOX STYLING ========== end ========== */


/* ========== begin ========== IMAGE SANDBOX (MODAL) STYLING ========== begin ========== */

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


/* ========== end ========== IMAGE SANDBOX (MODAL) STYLING ========== end ========== */

<!-- ========== begin ========== IMAGE SANDBOX ========== begin ========== -->
<div id="product_img_bx">
  <img src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" id="featured" />

  <div id="slide_wrapper">
    <div id="slide_left" class="slide_arrow"><span>&#10094;</span></div>
    <div id="slider">
      <img src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail active" />
      <img src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
    </div>
    <div id="slide_right" class="slide_arrow"><span>&#10095;</span></div>
  </div>
</div>
<!-- ========== end ========== IMAGE SANDBOX ========== end ========== -->

<!-- ========== begin ========== IMAGE SANDBOX (MODAL) ========== begin ========== -->
<div id="sandbox_modal">
  <div id="sandbox_modal_body">
    <div id="main_wrapper">
      <div id="img_slides_wrapper">
        <div id="img_slide_left" class="img_slide_arrow"><span>&#10094;</span></div>
        <div id="img_slides">
          <img data-index="0" class="imgSlide active" 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" class="imgSlide" 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" class="imgSlide" 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" class="imgSlide" 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" class="imgSlide" 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" class="imgSlide" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
          <img data-index="6" class="imgSlide" src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
          <img data-index="7" class="imgSlide" src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        </div>
        <div id="img_slide_right" class="img_slide_arrow"><span>&#10095;</span></div>
      </div>

      <div id="img_thumbnails">
        <img data-index="0" class="imgThumbnail active" 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" class="imgThumbnail" 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" class="imgThumbnail" 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" class="imgThumbnail" 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" class="imgThumbnail" 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" class="imgThumbnail" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        <img data-index="6" class="imgThumbnail" src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        <img data-index="7" class="imgThumbnail" src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
      </div>
    </div>
  </div>
</div>
<!-- ========== end ========== IMAGE SANDBOX (MODAL) ========== end ========== -->

如果有人能帮助我，我会很感激。

Answer 1

HTML的 Data-Index 由JavaScript中的 // INIT 部分删除并生成。

我的JavaScript非常混乱。但是如果起作用，它可以起作用。

/* ========== begin ========== MODAL INITIALISATION SCRIPT ========== begin ========== */
let modalBtn = document.getElementById("featured");
let modal = document.getElementById("sandbox_modal");

modalBtn.addEventListener("click", function () {
  var idx = this.getAttribute("data-index");
  modal.classList.add("sandbox_modal_on");
  document.querySelector(`#img_slides > .active`).classList.remove("active");
  document
    .querySelector(`#img_slides > :nth-child(${idx})`)
    .classList.add("active");
  document.querySelector(".imgThumbnail.active")?.classList.remove("active");
  document
    .querySelector(`#img_thumbnails > :nth-child(${idx})`)
    .classList.add("active");
});

window.onclick = (e) => {
  if (e.target.matches("#sandbox_modal")) {
    modal.classList.remove("sandbox_modal_on");
  }
};
/* ========== end ========== MODAL INITIALISATION SCRIPT ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX SCRIPT (DEFAULT) ========== begin ========== */
let thumbnails = document.getElementsByClassName("thumbnail");
let activeImages = document.getElementsByClassName("active");

for (var i = thumbnails.length - 1; i >= 0; i--) {
  let thumbnail = thumbnails[i];

  thumbnail.addEventListener("mouseenter", function () {
    if (activeImages.length > 0) {
      activeImages[0].classList.remove("active");
    }

    this.classList.add("active");
    document.getElementById("featured").src = this.src;
    document
      .getElementById("featured")
      .setAttribute("data-index", this.getAttribute("data-index"));
  });
}

/* eventListener to run the script at the start and hdie left button automatically */
window.addEventListener("load", change);
var slidesAmount = document.querySelectorAll("#slider .thumbnail").length;
var slidesPerScreen = 4;
var currentSlideCounter = 1;
var maxSlideCounter = slidesAmount - slidesPerScreen + 1;

let buttonLeft = document.getElementById("slide_left");
let buttonRight = document.getElementById("slide_right");

let container = document.getElementById("slider");

buttonLeft.addEventListener("click", function () {
  container.scrollLeft -= 70;

  if (currentSlideCounter > 1) {
    currentSlideCounter -= 1;
  }
  change();
});

buttonRight.addEventListener("click", function () {
  container.scrollLeft += 70;

  if (currentSlideCounter < maxSlideCounter) {
    currentSlideCounter += 1;
  }
  change();
});

function change() {
  switch (currentSlideCounter) {
    case 1:
      document.querySelector("#slide_left").classList.add("changes");
      if (maxSlideCounter == 2) {
        document.querySelector("#slide_right").classList.remove("changes");
      }
      break;

    case maxSlideCounter:
      document.querySelector("#slide_right").classList.add("changes");
      if (maxSlideCounter == 2) {
        document.querySelector("#slide_left").classList.remove("changes");
      }
      break;

    default:
      document
        .querySelectorAll(".slide_arrow")
        .forEach((el) => el.classList.remove("changes"));
      break;
  }
  /* this fixes the issue you addressed */
  if (slidesAmount <= slidesPerScreen) {
    document
      .querySelectorAll(".slide_arrow")
      .forEach((el) => el.classList.add("changes"));
  }
}
/* ========== end ========== IMAGE SANDBOX SCRIPT (DEFAULT) ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX SCRIPT (MODAL) ========== begin ========== */
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"));
  });
});
/* ========== end ========== IMAGE SANDBOX SCRIPT (MODAL) ========== end ========== */

// Init
var itemCount = document.querySelectorAll("#img_slides > img").length;
for (var i = 1; i <= itemCount; i++) {
  document
    .querySelector(`#slider :nth-child(${i})`)
    .setAttribute("data-index", i);
  document
    .querySelector(`#img_slides :nth-child(${i})`)
    .setAttribute("data-index", i);
  document
    .querySelector(`#img_thumbnails :nth-child(${i})`)
    .setAttribute("data-index", i);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #bbbbbb;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
  font-family: "Helvetica";
}

/* ========== begin ========== MODAL INITIALISATION STYLING ========== begin ========== */

div#sandbox_modal {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000d;
  display: grid;
  /*align-items: center;*/
  justify-items: center;
  opacity: 0;
  visibility: hidden;
  transition-property: opacity visibility;
  transition-duration: 750ms;
  transition-timing-function: ease;
}

div#sandbox_modal.sandbox_modal_on {
  opacity: 1;
  visibility: visible;
}

div#sandbox_modal div#sandbox_modal_body {
  height: 100%;
  width: fit-content;
  background-color: #ddddddcc;
  display: grid;
  align-items: center;
}

/* ========== end ========== MODAL INITIALISATION STYLING ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX STYLING ========== begin ========== */

div#product_img_bx {
}

img#featured {
  width: 400px;
  height: 250px;
  cursor: zoom-in;
  border: 2px solid #ffffff;
}

div#slide_wrapper {
  width: inherit;
  display: flex;
  justify-content: space-between;
  height: fit-content;
  margin-top: 10px;
}

div#slider {
  width: 270px;
  display: flex;
  height: fit-content;
  flex-wrap: nowrap;
  overflow: hidden;
  /*background-color: #444444;*/
}

img.thumbnail {
  min-width: 60px;
  height: 40px;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid #ffffff;
}

img.thumbnail:not(:last-child) {
  margin-right: 10px;
}

img.thumbnail:hover,
img.thumbnail.active {
  opacity: 1;
}

div#slide_wrapper > div.slide_arrow {
  height: 30px;
  width: 30px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #000;
  font-size: 15px;
  border-radius: 50%;
}

div#slide_wrapper > div.slide_arrow:hover {
  cursor: pointer;
}

/* this CSS line applies changes with the JS script */

div.slide_arrow.changes {
  visibility: hidden;
}

/* ========== end ========== IMAGE SANDBOX STYLING ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX (MODAL) STYLING ========== begin ========== */

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

/* ========== end ========== IMAGE SANDBOX (MODAL) STYLING ========== end ========== */

<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />

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

  <body>
    <!-- ========== begin ========== IMAGE SANDBOX ========== begin ========== -->
    <div id="product_img_bx">
      <img
        src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
        alt=""
        id="featured"
        data-index="0"
      />

      <div id="slide_wrapper">
        <div id="slide_left" class="slide_arrow"><span>❮</span></div>
        <div id="slider">
          <img
            src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
            class="thumbnail active"
          />
          <img
            src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
            class="thumbnail"
          />
          <img
            src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
            class="thumbnail"
          />
          <img
            src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
            class="thumbnail"
          />
          <img
            src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
            class="thumbnail"
          />
          <img
            src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
            class="thumbnail"
          />
          <img
            src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
            class="thumbnail"
          />
          <img
            src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt=""
            class="thumbnail"
          />
        </div>
        <div id="slide_right" class="slide_arrow"><span>❯</span></div>
      </div>
    </div>
    <!-- ========== end ========== IMAGE SANDBOX ========== end ========== -->

    <!-- ========== begin ========== IMAGE SANDBOX (MODAL) ========== begin ========== -->
    <div id="sandbox_modal">
      <div id="sandbox_modal_body">
        <div id="main_wrapper">
          <div id="img_slides_wrapper">
            <div id="img_slide_left" class="img_slide_arrow">
              <span>❮</span>
            </div>
            <div id="img_slides">
              <img
                class="imgSlide active"
                src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt=""
              />
              <img
                class="imgSlide"
                src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt=""
              />
              <img
                class="imgSlide"
                src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt=""
              />
              <img
                class="imgSlide"
                src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt=""
              />
              <img
                class="imgSlide"
                src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt=""
              />
              <img
                class="imgSlide"
                src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt=""
              />
              <img
                class="imgSlide"
                src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt=""
              />
              <img
                class="imgSlide"
                src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt=""
              />
            </div>
            <div id="img_slide_right" class="img_slide_arrow">
              <span>❯</span>
            </div>
          </div>

          <div id="img_thumbnails">
            <img
              class="imgThumbnail active"
              src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt=""
            />
            <img
              class="imgThumbnail"
              src="https://images.pexels.com/photos/783243/pexels-photo-783243.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt=""
            />
            <img
              class="imgThumbnail"
              src="https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt=""
            />
            <img
              class="imgThumbnail"
              src="https://images.pexels.com/photos/428340/pexels-photo-428340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt=""
            />
            <img
              class="imgThumbnail"
              src="https://images.pexels.com/photos/9558760/pexels-photo-9558760.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt=""
            />
            <img
              class="imgThumbnail"
              src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt=""
            />
            <img
              class="imgThumbnail"
              src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt=""
            />
            <img
              class="imgThumbnail"
              src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <!-- ========== end ========== IMAGE SANDBOX (MODAL) ========== end ========== -->

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

Answer 2

感谢David Y.启发我尝试自己解决我的问题。

在问他（和Stackoverflow）的帮助时，我坦率地认为他很快就会回答，所以在那个时期，我开始为解决问题做出解决。显然，解决该问题的方法已嵌入到答案中。曾经发布到我以前的问题。

首先，我创建了一个称为“ ThumbnailHover” 的新功能，将必要的选择器复制到此函数中，称为底部的功能，就像他做到的那样，并将HTML Data-Indexes放入<< em>缩略图 img标签第一个沙箱。

/* ========== begin ========== MODAL INITIALISATION SCRIPT ========== begin ========== */
let modalBtn = document.getElementById('featured')
let modal = document.getElementById('sandbox_modal')

modalBtn.addEventListener('click', () => {
  modal.classList.add('sandbox_modal_on')
})

window.onclick = (e) => {
  if (e.target.matches('#sandbox_modal')) {
    modal.classList.remove('sandbox_modal_on')
  }
}
/* ========== end ========== MODAL INITIALISATION SCRIPT ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX SCRIPT (DEFAULT) ========== begin ========== */
let thumbnails = document.getElementsByClassName('thumbnail')
let activeImages = document.getElementsByClassName('active')

for (var i = thumbnails.length - 1; i >= 0; i--) {
  let thumbnail = thumbnails[i]

  thumbnail.addEventListener('mouseenter', function() {
    if (activeImages.length > 0) {
      activeImages[0].classList.remove('active')
    }

    this.classList.add('active')
    document.getElementById('featured').src = this.src
  })
}

/* eventListener to run the script at the start and hide left button automatically */
window.addEventListener("load", change);
var slidesAmount = document.querySelectorAll('#slider .thumbnail').length;
var slidesPerScreen = 4;
var currentSlideCounter = 1;
var maxSlideCounter = slidesAmount - slidesPerScreen + 1;

let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')

let container = document.getElementById('slider')

buttonLeft.addEventListener('click', function() {
  container.scrollLeft -= 70;

  if (currentSlideCounter > 1) {
    currentSlideCounter -= 1;
  }
  change();
})

buttonRight.addEventListener('click', function() {
  container.scrollLeft += 70;

  if (currentSlideCounter < maxSlideCounter) {
    currentSlideCounter += 1;
  }
  change();
})

function change() {
  switch (currentSlideCounter) {
    case 1:
      document.querySelector('#slide_left').classList.add('changes');
      if (maxSlideCounter == 2) {
        document.querySelector('#slide_right').classList.remove('changes');
      }
      break;

    case maxSlideCounter:
      document.querySelector('#slide_right').classList.add('changes');
      if (maxSlideCounter == 2) {
        document.querySelector('#slide_left').classList.remove('changes');
      }
      break;

    default:
      document.querySelectorAll('.slide_arrow').forEach(el => el.classList.remove('changes'));
      break;
  }

  if (slidesAmount <= slidesPerScreen) {
    document.querySelectorAll('.slide_arrow').forEach(el => el.classList.add('changes'));
  }
}
/* ========== end ========== IMAGE SANDBOX SCRIPT (DEFAULT) ========== end ========== */

/* ========== begin ========== IMAGE SANDBOX (MODAL) SCRIPT ========== begin ========== */
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 thumbnailHover = 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");
  document.querySelector(`#slider > img.active`).classList.remove("active");
  document.querySelector(`#slider > [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("#img_thumbnails .imgThumbnail").forEach(function(elem) {
  elem.addEventListener("click", function() {
    thumbnailClick(this.getAttribute("data-index"));
  });
});

document.querySelectorAll("#slider .thumbnail").forEach(function(elem) {
  elem.addEventListener("mouseenter", function() {
    thumbnailHover(this.getAttribute("data-index"));
  });
});
/* ========== end ========== IMAGE SANDBOX (MODAL) SCRIPT ========== end ========== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #bbbbbb;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
  font-family: "Helvetica";
}


/* ========== begin ========== MODAL INITIALISATION STYLING ========== begin ========== */

div#sandbox_modal {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000d;
  display: grid;
  /*align-items: center;*/
  justify-items: center;
  opacity: 0;
  visibility: hidden;
  transition-property: opacity visibility;
  transition-duration: 750ms;
  transition-timing-function: ease;
}

div#sandbox_modal.sandbox_modal_on {
  opacity: 1;
  visibility: visible;
}

div#sandbox_modal div#sandbox_modal_body {
  height: 100%;
  width: fit-content;
  background-color: #ddddddcc;
  display: grid;
  align-items: center;
}


/* ========== end ========== MODAL INITIALISATION STYLING ========== end ========== */


/* ========== begin ========== IMAGE SANDBOX STYLING ========== begin ========== */

div#product_img_bx {}

img#featured {
  width: 400px;
  height: 250px;
  cursor: zoom-in;
  border: 2px solid #ffffff;
}

div#slide_wrapper {
  width: inherit;
  display: flex;
  justify-content: space-between;
  height: fit-content;
  margin-top: 10px;
}

div#slider {
  width: 270px;
  display: flex;
  height: fit-content;
  flex-wrap: nowrap;
  overflow: hidden;
  /*background-color: #444444;*/
}

img.thumbnail {
  min-width: 60px;
  height: 40px;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid #ffffff;
}

img.thumbnail:not(:last-child) {
  margin-right: 10px;
}

img.thumbnail:hover,
img.thumbnail.active {
  opacity: 1;
}

div#slide_wrapper>div.slide_arrow {
  height: 30px;
  width: 30px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #000;
  font-size: 15px;
  border-radius: 50%;
}

div#slide_wrapper>div.slide_arrow:hover {
  cursor: pointer;
}


/* this CSS line applies changes with the JS script */

div.slide_arrow.changes {
  visibility: hidden;
}


/* ========== end ========== IMAGE SANDBOX STYLING ========== end ========== */


/* ========== begin ========== IMAGE SANDBOX (MODAL) STYLING ========== begin ========== */

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


/* ========== end ========== IMAGE SANDBOX (MODAL) STYLING ========== end ========== */

<!-- ========== begin ========== IMAGE SANDBOX ========== begin ========== -->
<div id="product_img_bx">
  <img src="https://images.pexels.com/photos/1564149/pexels-photo-1564149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" id="featured" />

  <div id="slide_wrapper">
    <div id="slide_left" class="slide_arrow"><span>❮</span></div>
    <div id="slider">
      <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="" class="thumbnail active" />
      <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="" class="thumbnail" />
      <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="" class="thumbnail" />
      <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="" class="thumbnail" />
      <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="" class="thumbnail" />
      <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="" class="thumbnail" />
      <img data-index="6" src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
      <img data-index="7" src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="thumbnail" />
    </div>
    <div id="slide_right" class="slide_arrow"><span>❯</span></div>
  </div>
</div>
<!-- ========== end ========== IMAGE SANDBOX ========== end ========== -->

<!-- ========== begin ========== IMAGE SANDBOX (MODAL) ========== begin ========== -->
<div id="sandbox_modal">
  <div id="sandbox_modal_body">
    <div id="main_wrapper">
      <div id="img_slides_wrapper">
        <div id="img_slide_left" class="img_slide_arrow"><span>❮</span></div>
        <div id="img_slides">
          <img data-index="0" class="imgSlide active" 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" class="imgSlide" 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" class="imgSlide" 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" class="imgSlide" 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" class="imgSlide" 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" class="imgSlide" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
          <img data-index="6" class="imgSlide" src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
          <img data-index="7" class="imgSlide" src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        </div>
        <div id="img_slide_right" class="img_slide_arrow"><span>❯</span></div>
      </div>

      <div id="img_thumbnails">
        <img data-index="0" class="imgThumbnail active" 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" class="imgThumbnail" 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" class="imgThumbnail" 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" class="imgThumbnail" 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" class="imgThumbnail" 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" class="imgThumbnail" src="https://images.pexels.com/photos/5701644/pexels-photo-5701644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        <img data-index="6" class="imgThumbnail" src="https://images.pexels.com/photos/1639729/pexels-photo-1639729.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
        <img data-index="7" class="imgThumbnail" src="https://images.pexels.com/photos/4965343/pexels-photo-4965343.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
      </div>
    </div>
  </div>
</div>
<!-- ========== end ========== IMAGE SANDBOX (MODAL) ========== end ========== -->

谢谢大卫Y.