javascript - swiper-slide: How to create hover &or click interaction so when swiper-slide is clicked on the image pops u

I can't seem to get only the swiper-slide that's clicked on to pop up. Instead all the images with the class pop up at once.

I have tried using webflow native interactions in interactions panel using affect:class with all possible options (all,parent,children) but only get all the images to pop up at once.

The swiper.js is horizontal scrolling using mousewheel with thumbnail images. I have another div (seperate collection) with an img block that i'm trying to trigger to open when clicking swiper-slide. I have also tried placing the div & img into swiper collection but that doesn't work because when larger image is opened, it too moves with the entire swiper even when trying position fixed.

I'm new with swiper.js and don't know much javascript...but thinking if the solution can't be sorted using native webflow interactions then it lays somewhere in the active class &/or using pointer events, h-ref, Or maybe I need connect 2 swiper collections but then what...?

In summary looking for a solution: 'When clicking on swiper-slide = div/img pops up' then a button/interaction when clicked on div/img it closes out and resets.

Published staging site where the mousehweel scroll works as apposed to the read only link:

Webflow read-only link to current build:

;utm_source=designer&utm_content=ryan-voigt&preview=fddea90ab917232484249a2a052555c8&pageId=6797e6e08bddf64a268ab9c5&workflow=preview

<script src="@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>

desired effect when swiper-slide is clicked on