How to create a Dynamic slider gallery?

Hello all,

I’m trying to create a simple Gallery that will take its images for a CMS collection. I’m not looking for a Lightbox, Just a plain Slider of 3 Images.

Right now I created 3 Images fields on the CMS collection (a field per slide).
When I go to the template page and try to get a background image from the collection I only manage to get an Image for the first slider.

This is the page - http://secret-stage-angular-968acb6dbe62b64f69.webflow.io/artists/dnyl-rvbyn-daniel-rubin
The slider is at the bottom.

Does anyone know please how can I create a dynamic slider and get the BG-images from the collection?

Thanks,
Shachar

Here is my site Read-Only: LINK (The gallery is on Artists profile collection)
https://preview.webflow.com/preview/secret-stage-angular-968acb6dbe62b64f69?preview=6bb175e0702b1c3c62dbff508f2e5f08

Paging @Maximosaurus who has just made this excellent slider tutorial for the community:

What do you think Maxime? Look like this could work with CMS too?

Yes @StuM it would work.

But as my technic rely on setting transforms in an interaction it won’t take the number of items (slides) for the slider dynamically.

@Daystar, as you want only three slides it should work the same way. Just make sure you limit the number of items in the collection list setting to 3 (or the number you need).

If you get how the classes are made in my tutorial you can apply them to the elements of a collection list item as follow :

collection list wrapper = slider mask
collection list = slides wrapper
collection item = slide (flex item don’t shrink and 100% width)

Don’t hesitate if you want some help to set up this technic.

Cheers

1 Like

Thanks! I’ll give it a try and send an update :slight_smile:

1 Like