How to create a slideshow in Bubble with a Repeating Group

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.

Paid Members Only Video

Join any paid membership program for exclusive benefits include access to all our videos & 1 to 1 Bubble coaching.

Here's how to create a quick slideshow in your Bubble app. I have an empty page here. I'm using the new responsive engine. 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 row 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 Do a Search for into my Repeating Group into the first cell, and I just pop open the elements tree, you can see here my image is inside. So I can make that 100% width. All of my images have the same aspect ratio. 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 workflow 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 Repeating Group 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 every 5 seconds 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.