LightGallery 问题：缩放和滑块不适用于网格布局

问：

我在 React 应用程序中遇到了 LightGallery 组件的问题。我想使用 LightGallery 显示图像网格，为每个图像启用缩放功能，并使用滑块在图像之间导航。但是，当我将图像排列在网格布局中时，我遇到了缩放和滑块功能无法正常工作的问题。

我尝试了不同的方法，包括将每个图像包装在一个单独的组件中，以及使用具有多个标签的单个组件。当我使用没有网格布局的单个标签时，缩放功能工作正常，但当我在网格中使用多个标签时，它不起作用。此外，滑块功能在给定的实现中不起作用。

下面是我当前实现的代码片段：

import React from "react";
import LightGallery from "lightgallery/react";

// import styles
import "lightgallery/css/lightgallery.css";
import "lightgallery/css/lg-zoom.css";
import "lightgallery/css/lg-thumbnail.css";

// import plugins if you need
import lgThumbnail from "lightgallery/plugins/thumbnail";
import lgZoom from "lightgallery/plugins/zoom";

import Galary1 from "../assets/Galary1.jpg";
import Galary2 from "../assets/Galary2.jpg";
import Galary3 from "../assets/Galary3.jpg";
import Galary4 from "../assets/Galary4.jpg";
import Galary5 from "../assets/Galary5.jpg";
import Galary6 from "../assets/Galary6.jpg";
import Galary7 from "../assets/Galary7.jpg";
import Galary8 from "../assets/Galary8.jpg";
import Galary9 from "../assets/Galary9.jpg";
import Galary10 from "../assets/Galary10.jpg";
import Galary11 from "../assets/Galary11.jpeg";
import Galary12 from "../assets/Galary12.jpeg";

import "./Test.css";

const Test = () => {
  const galleryOptions = {
    plugins: [lgThumbnail, lgZoom],
    slideEndAnimatoin: false,
    hideBarsDelay: 1000,
    controls: false,
  };

  const images = [
    { src: Galary1, thumb: Galary1 },
    { src: Galary2, thumb: Galary2 },
    { src: Galary3, thumb: Galary3 },
    { src: Galary4, thumb: Galary4 },
    { src: Galary5, thumb: Galary5 },
    { src: Galary6, thumb: Galary6 },
    { src: Galary7, thumb: Galary7 },
    { src: Galary8, thumb: Galary8 },
    { src: Galary9, thumb: Galary9 },
    { src: Galary10, thumb: Galary10 },
    { src: Galary11, thumb: Galary11 },
    { src: Galary12, thumb: Galary12 },
  ];

  return (
    <div className="gallery-container">
      <div className="gallery-grid">
        <div className="gallery-row">
          {images.map((image, index) => (
            <a
              key={index}
              className="gallery-item"
              href={image.src}
              data-lg-size="1600-1200"
            >
              <img
                src={image.thumb}
                alt="Atri Muni"
                className="img-responsive"
              />
            </a>
          ))}
        </div>
      </div>
      <LightGallery dynamic={true} {...galleryOptions}>
        {images.map((image, index) => (
          // eslint-disable-next-line jsx-a11y/anchor-has-content
          <a
            key={index}
            href={image.src}
            data-lg-size="1600-1200"
            data-src={image.src}
          ></a>
        ))}
      </LightGallery>
    </div>
  );
};

export default Test;

CSS代码：

.gallery-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
    margin-top: 50px;
  }
  
  .gallery-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    margin-bottom: 20px;
  }
  
  .gallery-item {
    flex: 0 0 calc(33.33% - 10px);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
  }
  
  .gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Media query for mobile responsiveness */
  @media (max-width: 768px) {
    .gallery-row {
      grid-template-columns: repeat(1, 1fr);
    }
  }
  

我还为图库布局提供了必要的 CSS。但是，缩放和滑块功能无法按预期工作。单击图像不会触发缩放，滑块也不会在图像之间导航。

当我在标签内有一个 div 元素时，缩放功能基本上不起作用。

我已经研究并尝试了 LightGallery 文档和 Stack Overflow 线程中的一些建议，但我无法解决问题。

我将不胜感激有关如何使用 LightGallery 使缩放和滑块功能与网格布局配合使用的任何见解或建议。提前感谢您的帮助！