How to create interaction/event on swiper.slide using swiper.js

When clicking on the swiper.slide the image pops up, but it moves with the swiper instead of being fixed to screen like I want it to be.

Loom video explaining below

Webflow read only link: https://preview.webflow.com/preview/ryan-voigt-717335401f33cf4c759d35f0f3bb?utm_medium=preview_link&utm_source=designer&utm_content=ryan-voigt-717335401f33cf4c759d35f0f3bb&preview=5db4e97e4da868010c289a261ea9047b&pageId=67a93a9652fcb0b26b455445&locale=en&workflow=preview

Reference of website with similar function: https://alinaasmus.com/vogue-hong-kong

Images attached of design i'm trying to achieve.

I tried making the div with the image that pops up fixed but it didn't work, the image pop up still moves with swiper. As well, it seems to be quite buggy as some images open and close correctly, where others open with some of the thumbnails on top, and others don’t close out.

Below is the bit of code I have in there currently. Taken from swiper.js

    <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>