Join the Webstudio community

Updated 2 months ago

Adding an Image Gallery

At a glance

The post asks how to add an image gallery. Community members suggest using Swiper JS or creating a custom component. One community member provides a link to a working example of a custom component, but notes that the image sources are currently static and should be made dynamic from a CMS. The community members discuss publishing the component as a template in the Marketplace, and one member expresses interest in contributing to the community.

Useful resources
How can you add an image gallery?
M
c
J
9 comments
Do you have an example of what you need when you speak of image gallery?
Like in an ecom store.
One big image and small images on the right that become the big image when clicked
2 ways :
  1. Maybe you could use swiper JS
  2. You make your own component
(i tried the last one. the code is working on a single HTML page, but it's not working on Webstudio... don't know why. Will make update if I can manage to work with it)
Attachment
SCR-20240909-nspm.jpeg
@cramses.

All right then. It works right now.

Here is the link to make the same component (which can be improve of course).

https://p-7a49fc8c-2bf7-4c27-9673-aa3baa475bdd.apps.webstudio.is/?authToken=f3759971-639f-4f41-ae16-5c576d90240a&mode=preview

You will see that there is an html embed with the code.

You just have to copy paste.

Improvement : src for the image has to come from a CMS. Right now in this example they are static. So make them dynamic.

@John Siciliano I don't know if a component like that could interest the community?
we accept community contributions πŸ˜‰
btw working on the baserow template as we speak
I don't know how I can publish a (little) component like for the community?

(P.S. : I gonna make template for the community when the variables CSS will be finish I cannot wait!!)
It would be a template in the Marketplace
Thank you Milan!
Add a reply
Sign up and join the conversation on Discord