Webflow中实现点击Swiper滑块触发单独大图弹窗及关闭交互的方案求助

我现在碰到个棘手的问题：点击Swiper滑块的时候，所有带弹窗类的图片居然一起弹出来了，而不是只有我点击的那个滑块对应的大图弹窗。

我已经试过用Webflow原生的交互面板来做，选了影响: 类的所有选项（全部、父级、子级），结果还是所有图片同时弹出，完全达不到预期。

我的Swiper是用鼠标滚轮控制横向滚动的缩略图滑块，另外有个单独集合里的div和图片块，我想实现点击滑块时触发这个大图弹窗。我也试过把这个弹窗的div和图片放进Swiper集合里，但这样的话，大图弹出来之后会跟着整个Swiper一起滚动，哪怕设了固定定位也没用。

我刚接触Swiper.js，对JavaScript也不太熟悉...我猜如果原生Webflow交互解决不了的话，可能得从active类、指针事件、href入手？或者是不是要关联两个Swiper集合？但具体该怎么做我完全没头绪。

简单说我的需求就是：

• 点击某个Swiper滑块时，对应的大图弹窗弹出
• 点击弹窗里的按钮或者弹窗区域时，弹窗关闭并重置状态

下面是我当前用的Swiper代码：

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper.is-scrolling', {
  slideToClickedSlide: false,
  slidesPerView: "auto",
  freeMode: {
    enabled: true,
    sticky: false,
    momentumBounce: false,
      },
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
    dragSize: 100,
  },
  mousewheel: {
    enabled: true,
    sensitivity: 1,
  },
});
</script>

期望实现的效果如图：

备注：内容来源于stack exchange，提问作者Maks Eidelson