How to create a slideshow in Bubble with a Repeating Group

Headshot of Matt the Planet No Code Bubble Coach

Need 1 to 1 help?

Your no-code consultant & Bubble tutor.

In this Bubble tutorial we explain how to create a slideshow with a Repeating Group that uses a Next button and a Previous button. We conclude the video by demonstrating the workflow needed to make the slideshow automatically progress through the slides.

. And just to be clear, my data structure is I have a data type called slides with just really simple, just an image field and then four slides, some images.

Setting up a Repeating Group


So on my canvas here, I'm going to draw a Repeating Group and I'll just centre that for neatness. I want to show one image at a time. So first we need to just change the inside container to a
that's referring to what's inside of each cell. Yeah, here we go. Here's how I make it show one image at a time.

Data Source


Then data source slides
. So I can put in an override here so it gets the size and the shape right. And then the dynamic data is current slides image.

Buttons


Okay, this is going to be really simple. I'm going to add in two buttons below. One called Previous and the other called Next. I'm going to group those in a row. Place that row in the middle just because I like things that look a little bit more neat. A little bit neater. There we go.

Workflows


So what
actions do I need?

Let's have a look. Start a workflow. When Next is clicked, element actions show next. It automatically fills this field here because I've only got one
on the page. I want my slideshow to wrap around and then I can go the opposite here.

Show previous, wrap around. Let's preview that.

There's my first slide. Next slide. Will it loop? There you go. It loops round.

Automatic progression


What if I want my slideshow to progress automatically?

Well, I can do
and I can just add in that command there and wrap around. So then it should progress through my slides in order every 5 seconds. Let's see if that works. There we go.

That's 5 seconds. Try one more. Brilliant. Cool. We can see that that is working.