CMS powered slider for Webflow

[jmoweb]

Hey, I used swiper for a carousel style navigation, and I was able to create a great experience but... Webflow offer what they call a CMS collection, that allows to populate collections lists within the page. There are some solutions out there to generate carousels creating individual slides for each collection item, but it is the one thing I have not been able to create with swiper js.
I tried everything, and I'm clearly a no coder, and I'm dying. Does anybody know how i would make the swiper js recognize each element of the CMS collection as a single slide?
My current solution has been adding a single collection to each slide... but I have a collection limit per page, and I need to grow it. Here is the link for reference https://memorialarts.ca
Any good word will help :)

[jsphbngrnd]

Hi @jmoweb,

This is actually pretty easy to achieve, all you need to do is add the correct classes to your element.

So if you're using a CMS collection, you'll natively have:

• The wrapper
• The list
• The item

What you want is for these elements to have the markup needed for the Swiper library to work.

The wrapper -> swiper
The list -> swiper-wrapper
the item -> swiper-slide

Hope this helps

[jmoweb]

Thank you @jsphbngrnd ! I actually kept digging until I saw where I made the mistake first and then I was able to fix the error… and now I have a beautiful slider that acts exactly how I want and is CMS powered, thank you 🎉