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

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:

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.

… 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.

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

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.