Tutorial | Create a Dynamic Multi-Image Slider

I have put together a short 7 step tutorial on how to create a Dynamic Multi-Image Slider.

The amount of slides will be determined on the amount of images placed in the Multi-Image field.
This will remove the arrow and nav slider if there’s only one image.

Here you go.
https://webflow.com/website/Tutorial-Dynamic-Multi-Image-Slider

I hope this helps you.
Let me now if you have any difficulties, I’ll be glad to help.

10 Likes

This looks exactly like what I was looking for. Thank you!

I actually am having trouble getting this to work with drop-down options for color variants.

Is that even possible?

1 Like

Hey, thank you for the awesome work!
Is it possible to have an image-component inside the slides instead of using the background?
Thank you :slight_smile:

This is perfect, thank you very much for the detailed explanation!!

I’m sorry already if this is too much to ask, but do you think it is possible to add a dynamic description + link to each slide too? I have made a screenshot to better explain my problem:

I have already added the “caption div” to the whole thing and also connected it properly, but it doesn’t work. Do you have any idea what I could do?

Thanks a lot in advance!

1 Like

Hi man! First of all, thanks a lot! You are my god now!

I have just one question.
Is there a way to have predefine FIRST slider and rest of them to be cms dynamic from multi image?

Thanks in advance, and once again - YOU ROCK MAN!

This is seriously amazing! Thank you so much for putting this together!

So I’m trying to lay out my content the way it’s drawn out in the attached image and I need each of the dynamic image sliders to reference a different multi-image field within the same CMS collection item. Do you know if there is any way I can use the code you so kindly built out for us to put this together? Thanks so much in advance :slight_smile:

Hi, Sorry for the late response.
The custom code will need be modified slightly in order to have more than one slider on a page.
Not sure if this is what you meant?

Thanks :slight_smile:

Everything is possible with custom code, but why won’t you put the first image into your collection?

This article is about multi image fields, not about a collection of CMS items. In the multi image field you just add images, there isn’t really a place to add info about each image.

1 Like

No worries. Thanks for letting me know. I’ll go ahead and alter the design for now until I figure it out.

This is just awesome, I just gave it a try and although it wouldn’t work for a stupid “>” missing at the end of the script closing tag, it’s working perfectly now.

Thank you for your great work Eli!

1 Like

Thank you very much for the tutorial. Works with a ligthbox inside the slider. when to click the image gets bigger?

Super helpful! But this code is now disabling the view of another collection list wrapper, despite me putting the specific ids on the collection list and slider as instructed in your tutorial. I’m not savvy with javascript, what line would be triggering this to happen?

Works super well! Would you have any idea what to change/add in the custom code to add support for multiple sliders on a page?

1 Like

Hey Eli, I am following your directions on how to create a dynamic multi-img slider, and I am not able to make it work. I am willing to pay you as a consultant to share screens with me and help me figure it out. Thanks for your time.

Hey, this is awesome - thank you for sharing! I made it work on desktop but the gallery slider is not working on mobile or smaller devices. It shows just a gray box with the arrows, any thoughts?

Hey there - Thanks for this! Just wondering - how did you connect the buttons on your example page to the different multi-image categories?

Hey, I can’t get this work worth a dang! All I get is blank space for the slider (and the collection list, of course). Could you take a look: https://preview.webflow.com/preview/orchid-3129cf?utm_medium=preview_link&utm_source=designer&utm_content=orchid-3129cf&preview=64eb5c4b591ef148db01bb2438f79d36&pageId=6032c012143e8e9fedcb4477&itemId=6033d356d88e067df62a7778&mode=preview