Hey!
I’ve got swiper js working, specifically horizontal scroll with mousewheel but not struggling to figure out how to create the interaction (event?) on swiper.slide. I’ve included a loom video, design screenshots of what i’m trying to achieve, and my read-only link below.
Here’s a nice reference website I found of something similiar: https://alinaasmus.com/vogue-hong-kong
Essentially - on swiper.slide click (thumbnail) I want the image to pop-up larger spanning 100% height of screen & FIXED. The problem i’m having is the ‘pop-up image’ also slides with swiper horizontally instead of it being fixed to middle. 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.
This is my first time using swiper.js and have very little understanding of custom code. Any help would would be much appreciated as i’m lost at this point…
Thank you.
LOOM VIDEO HERE
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
Hi there,
To create a fixed pop-up modal in Webflow that stays in place during horizontal scrolling, follow these styling settings for your pop-up wrapper Div block:
- Display: flex (enables flexible box layout for centered content)
- Position: Fixed, full (ensures the modal stays in place regardless of scroll position)
- Z-index: 9999 (keeps the modal above other page elements)
- Flex layout: vertical, center, center (maintains perfect centering of modal content)
For better visual hierarchy, add a semi-transparent overlay background using #000000 with 80% opacity. This creates contrast between your modal and the page content underneath.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
<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>
