How to create a slideshow in Bubble with a Repeating Group

Creating a Slideshow in Bubble with a Repeating Group

Here's how to create a quick slideshow in your Bubble app. I have an empty page here, and I'm using the new responsive engine. To be clear, my data structure is a data type called Slides, with just a simple image field, and then four slides with some images.

Setting Up the Repeating Group

On my canvas, I'm going to draw a repeating group. I'll center that for neatness. I want to show one image at a time, so first we need to change the inside container to a row, referring to what's inside of each cell. Here's how I make it show one image at a time: set the data source to slides, and do a search for all slides.

Configuring the Image Element

Then into my repeating group, into the first cell, if I just pop open the elements tree, you can see here my image is inside. 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. The dynamic data is current slides image.

Adding Navigation Buttons

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 to look a little bit neater.

Setting Up Workflows

Now, let's look at what workflow actions we need. Start a workflow when next is clicked, use 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 for the previous button. Show previous, wrap around.

Testing the Slideshow

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

Adding Automatic Progression

What if I want my slideshow to progress automatically? Well, I can do a do every five seconds, and I can just add in that command there and wrap around. So then it should progress through my slides in order every five seconds. Let's see if that works. There we go. That was five seconds. Try one more. Brilliant. Cool. We can see that that is working.