使用glightbox隐藏图库图像

Question

我希望使用 Glightbox (https://github.com/biati-digital/glightbox) 创建一个包含 4 个缩略图的简单灯箱画廊。不过，我希望每个缩略图都包含 3 张图像的图库。

我尝试过使用隐藏的 CSS 属性来执行此操作，但无法使其工作。这是我目前正在处理的代码。

有人可以帮忙吗？

<section class="wrapper bg-light" id="projects">
  <div class="container py-14 py-md-10">
<div class="swiper-container grid-view mb-6" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
  <div class="swiper">
    <div class="swiper-wrapper">
    
    <div class="swiper-slide">
        <a class="item-link" data-glightbox data-gallery="project-1"><figure class="rounded mb-6"><img src="./assets/img/projects/project-1-1.jpg" srcset="./assets/img/projects/[email protected] 2x" alt="" /></figure></a>
        <div class="project-details d-flex justify-content-center flex-column">
          <div class="post-header">
            <h2 class="post-title h3"><a class="link-dark" data-glightbox data-gallery="project-4">Complete exterior renovation</a></h2>
            <div class="post-category text-ash">Location</div>
          </div>
          <!-- /.post-header -->
        </div>
        <!-- /.project-details -->
      </div>
      
      <div data-glightbox data-gallery="project-1" data-src="https://durninbuilding.ie/assets/img/projects/[email protected]"  data-title="Hidden item 1"></div>
      <div data-glightbox data-gallery="project-1" data-src="https://durninbuilding.ie/assets/img/projects/[email protected]"  data-title="Hidden item 2"></div>
      <div data-glightbox data-gallery="project-1" data-src="https://durninbuilding.ie/assets/img/projects/[email protected]"  data-title="Hidden item 3"></div>
      
      <!--/.swiper-slide -->
      
    </div>
    <!--/.swiper-wrapper -->
  </div>
  <!-- /.swiper -->
</div>
<!-- /.swiper-container -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

在此添加 JS：https://codepen.io/kelvinwins/pen/gOQBbBg