I’m currently designing and creating a real estate website, and therefore in need of dynamic cms image sliders, where each cms item has its own independent slider showing images from the multi-image field inside the cms.
I am basically trying to display multiple CMS items on the same page, with each item having it’s own slider that loops through it’s own images (Not images from the full collection list).
I’ve tried several youtube tutorials and can’t seem to make it work, so if anyone has a clue on how to achieve this, or an example of something similar I could take inspiration from, it would be greatly appreciated.
Currently, sliders cannot be automatically populated with dynamic content from CMS collections. However, you can implement this functionality using collection lists as a workaround:
Add a collection list element to each slide in your slider
Set each collection list to show only 1 item
Configure the “start at” setting for each collection list:
First slide: Start at item 1
Second slide: Start at item 2
Third slide: Start at item 3
And so on for additional slides
This method will display different items from your CMS collection across your slides. For multiple images per CMS item, you’ll need to set up separate collection lists on each slide and adjust their “start at” settings accordingly.
You can also support making dynamic sliders a native feature by voting on the Webflow Wishlist.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
You could achieve this by taking inspiration from this cloneable that I found which handles similar use-case.
Instead of placing the slider and the collection list in a template page (as done in the cloneable), you can place the collection list on a static page and place a slider in each collection item. In the same collection item you can have another collection list and select the source of it as the multi-image field that you have setup in the collection list. You can customize the code shared in the cloneable for your use-case (i.e. target the classes of slider element and collection list wrapper instead of ID) and it should work.
I tested this out in a personal site and made the code work for multiple slider and collection items and set the slider to auto-play and got the result as per your requirement, so it should ideally work for your use-case.
