image collection turned to carousel

At a glance

The community member is interested in using Webstudio to create an image slider with a database collection. They have seen discussions about carousels/sliders but none that mention the collection aspect. The community member's initial thought is to have a table in Airbase with all project images, and a column for the images to match the slug used for the projects. They then want to filter by slug to create the collection of project images and turn the collection into a slider, potentially using a library like Swiper.

The comments suggest that using a collection to render the same element (e.g., an image or a link with an image) repeatedly is straightforward, and the additional client-side JavaScript logic to turn the collection into a slider is the main challenge. The community members also mention that there are examples with Swiper.js in the Webstudio marketplace, though they don't use a collection.

ccalamitykay

Hey guys! I'm all about moving over to webstudio. Looks amazing and just playing around it's such a good builder.

I've seen ppl talking about carousels/sliders but none that mention the collection aspect. I apologize if this is a repeat.

Q: has anyone had success making an image slider with swiper or whatever but with a database collection? I need to have slideshows of projects on individual pages.

It's a nonnegotiable for my client, and I would be happy to take the time to figure it out but thought id see if anyone else has tried and found it impossible or has tried and succeeded before I do.

In webflow the solution was essentially creating a collection list and then hiding it from view, but connecting the list items (which displayed the multiple image field as a background) to a native slider, one item/slide. Kinda a nightmare actually.

I think it will be better in webstudio actually...

My initial thought is: to have in my airbase a table that is all project images, and to have a column for the images match the slug (same slug used for the projects). Then, I can filter by slug to create the collection of photos images.

So the real dependency is: Will i be possible to then turn the collection into a slider (I know I need to use something like swiper?)

3 comments

OOleg Isonen

Collection just renders the same element over and over, in this case if its an image or a link with an image inside, you just bind different href and src

OOleg Isonen

what you do on top of this rendering with sliders is just client side js logic

OOleg Isonen

we have some examples with swiper.js in the marketplace, I don't think they use collection, but its the same on principle, same with any other library

Add a reply

Join the Webstudio community

image collection turned to carousel