Streaming live at 10am (PST)

Tutorial | Create a Dynamic Multi-Image Slider

Hey, thanks for the great example for CMS sliders. Is there any chance you can help customize this code to get a multiple-image field slider inside a CMS based product page. I would like to switch trough the images in our product overview and have everything build by it self with Webflows CMS

Hi! Thank you for putting up this great tutorial. Is there a way to open an image from the slide separately if you click on it?

Hey! I just want to ask if there’s any way you can centre the images (or apply css to those images), I’ve been trying for a while and I’m having no luck.

https://preview.webflow.com/preview/swiftdropthat?utm_medium=preview_link&utm_source=designer&utm_content=swiftdropthat&preview=ae0caee3dfa2ebb5acffa9afecff4ddd&pageId=60167d0cbe8e9e18cb406122&itemId=601c3333a8988fb53f76f2dc&mode=preview

Hi, I’m having problems with this I followed the tutorial but when I got to the section where I input the multi-image collection there’s no option for it only the solo images. any help would be more than appreciated

edit: I’ve figured out where I went wrong but now I’ve got to step 7 and when I look at the site in the preview nothing shows is that just in preview and the code does work when published?

1 Like

Hey ~ thank you very much, but Is it possible to make this work NOT on collection pages, but the homepage for example?
https://michaelbodiam.com has a homepage with all these CMS projects there, and each project is just a slider loading all the must images. Can this be done with your technique?

Hi! I have installed this on my site but it is not working :frowning:

Here is the preview link:
https://preview.webflow.com/preview/parchaus?utm_medium=preview_link&utm_source=designer&utm_content=parchaus&preview=2ef14b5153228405fbc9c0d26b0e7224&pageId=60aec481763a53ead80d0626&itemId=60aec48b0b986b6096bf2f51&workflow=preview

Hi @WillNeeteson did you manage to get the custom code to do this?

For some reason this works no problem on some of my pages but not on others

I believe I’ve followed the steps to the detail, would you mind checking on this for me to see if I’m doing something wrong?

This is a really useful resource and I hope it will be useful to troubleshoot solutions so that more people can make use of it!

::Read-Only Link::

For some reason when I implement this, my slider is limited to only 5 slides when I have 25 images in the CMS item’s multi image category. Any way to allow all the slides to display?

@Eli11 How do I make this responsive? The feature works great but resizing the browser and on mobile I can’t seem to get the image to resize. The slider will resize but the contained image stays fixed causing the slider to crop the image. Please help.

Same issue here, how to show the multi-images in the slider, please? I only have access to the main image…

Any update on this? Have you found the solution Marvin, please?

I made progress to a point where more problems came to play because of combining multiple scripts which were added to the body codes of the page. I did get it responsive and also showing multiple images, but more problems arose. Enough for me to revert back and try something else.

Agree! I just hustle to make it responsive + too much script which will down the speed of my page. I would like to find an alternative to the Webflow lightbox but it seems nothing come out yet…

Hey, thanks for the tutorial.
I’m having an issue with the collection item, I am not able to bind it with the cms collection.
So i created a CMS collection “Gallery” and added the multi-image field. Inside I created a new Gallery and added the images in the multi-image field. But when I want to bind it with the collection item component it cant seem to find it!

Any suggestions?

I just found out that if I create a new collection for every image (inherently not using multi-image field, but single-image), it works. but that’s time-consuming.