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!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.