SwiperJS CMS List + CMS Popup

[maartin]

Hey!

I have a section with SwiperJS slider that pulls content from CMS (team members). When you click on any team member, fullscreen popup opens with more detail (pulled from CMS of the team member)

The way I’ve built this is having popup element in each slide, that opens by a normal interaction.

This works great before I first interact with a SwiperJS slider (meaning before I swipe or before I click on navigation arrows). After I swipe, the popup suddenly takes new constraints of swiper-wrapper.

Is there a way to escape the swiper-wrapper, or does anyone have a better idea / workaround to make this work as intended?

---

[maartin]

One solution I could think of, that I implemented successfully (but still looking if this is doable with CMS!):

Instead of using CMS, I used Components. Each component is one swiper-slide. I moved team-popup outside of CMS, and also added Components inside the team-popup. Then I connected both Component instances so that when you click on swiper-slide (with unique combo class), it looks for that unique combo class on Component inside the team-popup and shows it.

Pros: it works
Cons: cannot use CMS

[Smith-Cordell (Max Smith-Cordell)]

Might be worth trying SwiperJS in CSS mode, although that doing so will remove drag functionality