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.
Create a slideshow in minutes: Learn how to build an auto-advancing image gallery with repeating groups and custom buttons.
Master Bubble's new responsive engine: Discover how to craft a sleek, mobile-friendly slideshow using Bubble's responsive design tools.
Elevate your app with dynamic content: Transform static pages into engaging slideshows with just a few clicks.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
3 ways we support solopreneurs
Our team is here to help, with a combined 30+ years working for internet startips.
Learn Bubble
Explore our library of 300+ Bubble and no code tutorial videos. Watched by over 800k no coders on YouTube.
Bubble Coaching
Troubleshoot your Bubble app and build new no code features with our in house Bubble expert.
Mastery
Ready to take your SaaS idea to the next level? Join our exclusive Mastery program for personalised content & mentoring.