如何使 Lightbox 以主容器（Swiper Thumbnail Gallery）中显示的图像开始？

Question

我正在构建一个产品页面，并成功设置了一个图片库，如下所示： -一张主图。

• 其下方有 3-4 个较小的缩略图（使用 Swiper 的缩略图功能）。

我想添加缩放功能，以便当用户单击按钮时，灯箱会打开，他们可以滑动浏览图像。

我面临的问题： 我希望灯箱从主容器中当前显示的图像开始。现在，它不同步，我不知道如何解决这个问题。

这是我到目前为止所做的：

• 使用 Swiper 作为缩略图库。
• 安装了一个 lightbox npm 包，但问题是它以特定顺序显示图像（例如，图像 1，然后是 2，等等）。我希望灯箱从当前位于主容器中的图像开始。

如何使灯箱以与主容器相同的图像打开？另外，我应该总体使用哪些 npm 软件包来确保最佳性能并避免减慢我的网站速度？

<div className="single-product-page-img-section">
  {/* Thumbnail Container */}
  <div className="single-product-multiple-img-container">
    <Swiper
      onSwiper={setThumbsSwiper}
      spaceBetween={10}
      slidesPerView={4}
      freeMode={true}
      direction="vertical"
      watchSlidesProgress={true}
      modules={[FreeMode, Navigation, Thumbs]}
      className="mySwiper"
    >
      <SwiperSlide>
        <img src="https://swiperjs.com/demos/images/nature-1.jpg" alt="Thumbnail 1" />
      </SwiperSlide>
      <SwiperSlide>
        <img src="https://swiperjs.com/demos/images/nature-2.jpg" alt="Thumbnail 2" />
      </SwiperSlide>
    </Swiper>
  </div>

  {/* Main Image Container */}
  <div className="single-product-main-img-container">
    <Swiper
      style={{
        "--swiper-navigation-color": "#fff",
        "--swiper-pagination-color": "#fff",
      }}
      spaceBetween={10}
      navigation={true}
      thumbs={{ swiper: thumbsSwiper }}
      modules={[FreeMode, Navigation, Thumbs]}
      className="mySwiper2"
    >
      <SwiperSlide>
        <img src="https://swiperjs.com/demos/images/nature-1.jpg" alt="Main Image 1" />
      </SwiperSlide>
      <SwiperSlide>
        <img src="https://swiperjs.com/demos/images/nature-2.jpg" alt="Main Image 2" />
      </SwiperSlide>
    </Swiper>

    {/* Lightbox Button */}
    <button type="button" className="open-lightbox-btn">
      Open Lightbox
    </button>
  </div>
</div>

.single-product-page-img-section {
    width: 50%;
    height: 100%;
    background-color: aqua;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 5rem;
}

.single-product-multiple-img-container {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mySwiper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mySwiper .swiper-slide {
    height: 14rem;
    width: 14rem;
    opacity: 0.4;
    transition: opacity 0.3s ease-in-out; /* Smooth opacity transition */
}

.mySwiper .swiper-slide.swiper-slide-thumb-active {
    opacity: 1; /* Highlight active thumbnail */
}

img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.single-product-main-img-container {
    width: 75%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.open-lightbox-btn {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    background-color: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.open-lightbox-btn:hover {
    background-color: #555; /* Darker background on hover */
}

Answer 1

我正在构建一个枪支页面，并已成功设置了这样的芯片：-一个主图像。