Streaming live at 10am (PST)

Help with dynamically embedding items in Swiper slider code

#1

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?)
#2

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.