CMS Multi-Image Slider

Design help General
1

Does anyone know if this custom code by @jasondark (CMS Multi-Image Slider Demo - Webflow) will show multi-image slides from multiple collection items on a single page? Right now I have projects in one collection list that I would like to display on my homepage.

Please help!

Thanks.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

@crustmag the issue here is that, even with this custom code, you can only display a multi-image field on a CMS page…

3

Thanks for your response @sarahfrison. What would be the work around to show a slider for collection items on a page?

4

You could use a collection list but that still wouldn’t work with the multi-image field. As far as I’m aware, there’s no work-around available at the moment.

5

@sarahfrison I think there might be a way with custom code…right now i have custom code that appplies a w-dyn-item class to a collection item…couldn’t i like the slider within that item to the cms item id?

6

@crustmag feel free to try and report back :slight_smile: . i’m sure others would love to hear if you can make that work!

7

Anyone willing to help with the custom code? :smiley:

8

Has this ever been resolved? I’d like to make an image slider from the multi-image field - but I need to do it in a collection list on a standard page.

Still no way?

10

Hi, I’ve been wrestling with this topic as well and recently found a possible solution using HTMX. I’m primarily a designer, so apologies if I don’t get the technical terms right, but HTMX basically allows you to extract a section of a selected page from your website (e.g. a CMS page) and place it in a code embed anywhere on your site.

In my case I combined it with Swiper to create a photo gallery slider using a multi-image CMS field on one of my static pages. The slider is located on the relevant CMS page, the code embed on the static page is then used to retreive it from there.

It came in really handy on one of my latest projects, can be used with dynamic content (dynamic slugs etc.) and it is super easy to set up with minimal custom code. The functionality of the Swiper slider is also preserved, so it just works a treat all round.

It also works perfectly for multi-reference collection lists.

Here is a tutorial I used to set it up:

A bit late on this, but hopefully some of you find this useful :wink:

Edit: I had some issues with the HTMX swap attribute, Swiper didn’t work initially, but wrapping the Swiper slider on the CMS page in an extra div and targeting that instead did the trick :slightly_smiling_face:

11

Usually, custom code like this should allow you to pull images dynamically from various collection items into a single slider or gallery setup. If you haven’t already, i’d recommend giving it a try and see how it behaves with your specific setup. Sometimes, tweaking the code or adjusting settings in Webflow might be needed to fine-tune the display to your liking.