如何使JS代码可重用于不同的图像滑块

问：

我正在学习 JS，我做了一个有效的图像滑块，但我希望当单击大图像时，它会打开相同的图像滑块，但更大，更专注于图像

这是我拥有的图像滑块的代码：

<div class="product-imgs">
            <div class="img-display">
              <button class="hero__button hero__button--max-desktop hero__button--left left-arrow" id="left">
                <svg width="12" height="18" xmlns="http://www.w3.org/2000/svg" id="left">
                  <path d="M11 1 3 9l8 8" stroke="#1D2026" stroke-width="3" fill="none" fill-rule="evenodd" id="left" />
                </svg>
              </button>

              <div class="img-showcase">
                <img class="carousel__image product-img" src="./images/image-product-1.jpg" alt="">
                <img class="carousel__image product-img" src="./images/image-product-2.jpg" alt="">
                <img class="carousel__image product-img" src="./images/image-product-3.jpg" alt="">
                <img class="carousel__image product-img" src="./images/image-product-4.jpg" alt="">
              </div>

              <button class="hero__button hero__button--max-desktop hero__button--right right-arrow" id="right">
                <svg width="13" height="18" xmlns="http://www.w3.org/2000/svg" id="right">
                  <path d="m2 1 8 8-8 8" stroke="#1D2026" stroke-width="3" fill="none" fill-rule="evenodd" id="right" />
                </svg>
              </button>
            </div>
            <div class="img-select">
              <div class="img-item">
                <a href="#" data-id="1">
                  <img class="product-img" src="./images/image-product-1.jpg" alt="">
                </a>
              </div>
              <div class="img-item">
                <a href="#" data-id="2">
                  <img class="product-img" src="./images/image-product-2.jpg" alt="">
                </a>
              </div>
              <div class="img-item">
                <a href="#" data-id="3">
                  <img class="product-img" src="./images/image-product-3.jpg" alt="">
                </a>
              </div>
              <div class="img-item">
                <a href="#" data-id="4">
                  <img class="product-img" src="./images/image-product-4.jpg" alt="">
                </a>
              </div>
            </div>
          </div>

const imgs = document.querySelectorAll(".img-select a");
const imgBtns = [...imgs];
let imgId = 1;

imgBtns.forEach((imgItem) => {
  imgItem.addEventListener("click", (event) => {
    event.preventDefault();
    if (imgId !== imgItem.dataset.id) {
      document
        .querySelector(`a[data-id="${imgId}"]`)
        .parentNode.classList.remove("selected");
      document.querySelector(`a[data-id="${imgId}"]`).style.opacity = 1;
      imgItem.parentNode.classList.add("selected");
      imgItem.style.opacity = 0.5;
    }

    imgId = imgItem.dataset.id;
    slideImage();
  });
});

function slideImage() {
  const displayWidth = document.querySelector(
    ".img-showcase img:first-child"
  ).clientWidth;

  document.querySelector(".img-showcase").style.transform = `translateX(${
    -(imgId - 1) * displayWidth
  }px)`;
}

我的想法是拥有另一个具有相同 HTML 代码的 HTML “卡片”，并在单击大图像时使其可见，但是因为会有 2 张卡片，因此相同的 JavaScript 代码将不起作用，因此，它采用第一个图像滑块的第一个图像宽度，当我尝试移动较大的图像滑块时，它会断开，因为第二个图像滑块中的图像是大：

function slideImage() {
  const displayWidth = document.querySelector(
    ".img-showcase img:first-child"
  ).clientWidth;

我试图让 JS 适用于图像滑块并更改这部分代码，所以我使用了 .querySelectorAll 和 forEach，它有效，但图像中断，因为变量 displayWidth 占用第一个图像滑块宽度，第二个图像滑块更大：

function slideImage() {
  const displayWidth = document.querySelector(
    ".img-showcase img:first-child"
  ).clientWidth;


  document.querySelectorAll(".img-showcase").forEach(el => el.style.transform = `translateX(${
    -(imgId - 1) * displayWidth
  }px)`)
}

s