Help with dynamically embedding items in Swiper slider code

Hey guys! Thanks in advance for any help you guys can send my way. :pray:

I’m new to Webflow but totally loving this awesome community and tool. That being said, I’m having a bit of difficulty implementing a carousel slider with dynamic collection items. I’m not sure if this is something that requires jquery/js or not? I’ve done lots of googling and scouring through the forums but haven’t been able to figure out the best solution or else I ran into dead links (hopefully I haven’t overlooked anything).

GOAL
To populate a individual slide divs inside of a single horizontal carousel slider with content from a CMS collection based on a unique identifier (currently using SLUG as the id). Basically, each slide should point to a different item in the collection list so that I can grab corresponding image, name, description, etc. from each to fill the slide.

My Reference Links

Current method, thoughts, and issues
I’ve created a Collection List on the page and added a custom HTML Embed inside of the collection list that has the setup for the Swiper Slider. As a result, each collection item has an instance of the slider but that’s not what I want. I’m wanting to have ONE slider featuring each collection item.

Here’s an image of the HTML embed.

Other solutions I’ve considered/explored but couldn’t quite figure out which one is right or how to implement for desired result. I’ve linked other slider things I’ve tried, but I think those other ones are lacking some of the functionality and UX I’m wanting from the Swiper API.

  • css attribute selector to target the item ID
  • nth child (no idea how to access nth child of a collection list)
  • Webflow Slider + hacks
    • Custom Slider (lacked Swiper mobile first features like touch support, dragging gestures, responsivity, mousewheel/keyboard control, etc.-- unless this is all attainable via jquery?)
    • Dynamic Slider Hack (limits items to 1 per slide-- but how would I insert a collection list inside my custom coded div element?)

Resolved via manual static method.

Continued using Swiper slider, but I input the static content manually from CMS Collection via custom code since it’s less than 10 items currently needed in the slider.

Hi Jude.
Check out this tutorial on how to link SwiperJS with your CMS:

1 Like

Thanks Birk! I’ll check that out for future slider needs for sure. :slight_smile:

1 Like