Clickable Image Slideshow

Hi!

I am having issues creating a slideshow that is able to link to a different URL for each slide. At the moment i am using Slick Slideshow but I can only seem to edit the whole slideshow. I also want the user to move the slideshow by swiping, rather than auto play. I really need help with this! Thank you!!!

Hi @max24, for the linking, if your slideshow images are saved to individual records in your database, then you can also store the URL to each slide. Then, have a link element on top of the slideshow with a destination url of “Slideshow’s current slide’s URL” - every slide is dynamic, and so will the link.

Data structure of “Slide” data type:

Slide

  • Image (image)
  • Link (url)

Not sure about the swiping though. I don’t think that element supports that, but I’m not 100%. I know you can also turn off the auto-play and use the arrows.


Gaby | Private coaching, courses, and tons of free resources

Become a VIP Member for immediate access to 100+ lessons, videos, webinars, and more

2 Likes

Slick is swipeable on devices that support swipe, BTW. I’m not sure that can even be turned off (though autoplay/auto advance can be, of course!) :slight_smile:

1 Like

Hi @romanmg!

Thankyou for replying!!! I’m just a little bit confused because I have been putting my images into slick slideshow like this:

How do I put the images into my database so I can put the link on top? And if I do this will I lose the ability to swipe as well as press for the external URL?

Thankyou again

Thanks Keith!!

Make a data type like “Slide”. It will have a name (text), an image (type image) and a URL (type text). You can make that and add individual items in the data tab of your app. You might want a caption too (text field). See how that might work?

Use that as the source (Do a search for Slides) for your slideshow.

Then you’re gonna put a text on top of (or near) your slideshow to be the clickable thing to open the URL.

2 Likes

… And if it wasn’t super clear, you need to change the “Type of list” to “use a dynamic list” - that way you can pull images from your database. You wouldn’t be uploading them directly here anymore.

2 Likes

Right. (And yeah that might not be entirely obvious to the newish Bubble developer!)

1 Like

Thankyou so much both of you! And yes that’s me lol. Thankyou for breaking it down. I’ll give it a go!

Hi guys!

So I have done what you said and i love it! it gives me a lot more flexibility and the slideshow works the same, which is great. I am still struggling to get the image to be clickable. I added the link to the dynamic images in data, so it is embedded but i’m not sure how to activate it. Any ideas?

Sorry if this is a basic question. Thank you again for your help.