swiper.js combined with webflow cms collection and a modal
Hi! Glad to be member of this channel. This is my first time on discord and I hope that somebody could help me.
I ran into the problem, where I want to trigger a modal out of a swiper-slide that is connected to a CMS collection in webflow.
Did anybody ever built this? As soon as the slider is dragged, the position of the popup is broken.
4 Replies
Example can be found here (password = b0nnl1ve): bonnlive.webflow.io
Hi @fred_from_jupiter 👋 - you could do this by creating a second collection list that references the same collection, but keep it outside the slider.
Use the CMS item slug as an attribute in both collections and use JavaScript to trigger the proper modal open for the corresponding swiper slide. (You could also use the index parameter of the foreach loop (instead of the slug as attribute) since both collections will have same number of items.
I’m traveling this weekend but maybe can get time to do a demo next week.
Hi @Web Bae, many thanks for your reply and idea. I‘m going to try it this way and let you know about the result 🙏🏻
Hi @Web Bae My Javascript Skills are quite limited and I tried to fix the problem with the finsweet smart lightbox. https://finsweet.com/attributes/smart-lightbox
But that didn't do the trick. I think there are some other scripts like gsap that conflict with the finsweet one.
Curious about your solution with the second CMS collection and the slug attribute. Best regards!
Smart Lightbox - Prevent unwanted z-index positioning behaviors
Change the position of an opened lightbox in the DOM to prevent unwanted z-index, fixed positioning, and transform issues