Carousel are a great way to showcase various types of information.
With them, you can display testimonials from your customers, ressources, blog posts, features and many more.
But do you know how to create these type of carousel in Bubble ?
In this article, we are going to cover two different ways of building carousel.
One will be a basic carousel that can be realized for free without any plugin, and the second will be a more "polished" one, that will require a paid (but affordable) plugin.
1st method : Building a carousel in Bubble.io without any plugin
Step 1 : Designing our carousel
Let's start with the first method.
This one is pretty straightforward and as said earlier, do not require any plugin, so it is completely free.
Note that this method is pretty basic, and it will not enable you to create a "sliding" carousel. If you'd like to do this, please go to the 2nd method described further in this article.
Please note that you can also find another article that will show you how to build an infinite carousel in Bubble.
To get started, start by adding a repeating group to your page, and link it to the data of your choice.
In my example, I will use a Blog Posts repeating group taken from Nocodable Component's library.
The nice thing with this is that this repeating group is already filled with Dummy Data, so I can already get to work.
Step 2 : Configuring our repeating group
Now that we've added our repeating group, we need to make sure to apply some specific settings to it.
In particular, we need to make sure that our repeating group display a fixed number of items per page.
To ensure this, simply check the Set Fixed Number of Rows and Set Fixed Number of Columns checkboxes in your repeating group's properties panel.
You can set any values you'd like for the number of Rows and Columns. Simply note that these parameters will define the number of items shown per page of your repeating group.
In the screenshot above, we can that my RG will have 1 Row with 3 Columns, so it will display 3 items per page.
Step 3 : Adding our Workflows
Okay, now that our repeating group is set, we need to make it work !
With this configuration, you can easily set your carousel to work in two ways :
1. Making it change page from a user action
In this case, we will simply add a button that will enable our users to change the page.
This is useful if you want to paginate your repeating group (which is a good way to improve your page loading time).
To make this work, simply add some buttons under your repeating group.
You can use any elements you'd like, in my example I'm using Icons, but you can use buttons, or even text.
Now, we'll need to add a workflow to our buttons :
And once again, this is pretty straightforward, on the button that will be used to show the next page of you repeating group, simply attach a "Show next of a repeating group" action.
And for the button that is supposed to display the previous page, simply use the "Show Previous of a repeating group".
Important : Make sure that your repeating group is set to have a Fix Number of Rows and Columns as described in Step 2, or else you'll end up with an issue.
Now, one interesting thing to note is that you'll see a Wrap Around option when adding one of these actions.
In short, this option makes it so that your repeating group goes back to the first page of results when your user wants to see the next page, but is already one the last one.
So feel free to activate if you like.
Okay, now we've made a basic carousel that can be controlled by user, but maybe you'd like to make it automatically slide through pages ?
Well, there's a pretty easy way of doing this.
Simply add a new workflow with the "Page is Loaded" trigger :
By default, this workflow will be triggered every 5 seconds, but you can choose any interval you like.
Now, simply add a "Show Next of a repeating group" action to this workflow, and your workflow will automatically go to the next page, according to the interval you set.
Important : In this case, make sure to check the "Wrap Around" option. Otherwise your RG will stop going to the next page when it comes to the end of the list.
And there you go, you now have a basic (but very functional) carousel in Bubble that can be used for pretty much anything, and that is free !
2nd method : Using a plugin to create our carousel in Bubble
Okay, let's now cover another way that will help us to easily create "more complex" carousels.
The downside of this method is that it requires a plugin (which is free), but the result is much more polished, and gives the ability to slide through pages, rather then clicking on buttons (which is very useful on mobile devices).
Step 1 : Installing our carousel plugin for Bubble
Let's start by choosing our plugin.
I've tried several carousel plugins for Bubble, but the one I tend to recommend is Wonderful Image Slider.
Why do I recommend it ? Well because it's pretty handy plugin, it's free and it gives really good results when it comes to creating interactive carousels.
Also, it offers a good amount of customization options, which is always a good thing.
You can find the plugin's page here.
So go ahead and install it to your bubble app.
Step 2 : Designing our carousel in Bubble
Let's start by dragging and dropping a carousel element to your bubble app (which is called "Wonderful Image Slider V2" Element).
The plugin gives you two versions of those element, make sur not to choose the deprecated one !
Once that is done, let's start by setting it's dimensions to make sure it is responsive :
Uncheck "Make this element fixed width" and set the value you like.
Now, let's dive into the core setting of our carousel !
In the appearance tab of our properties panel, you can see that we have a bunch of options.
Obviously, the best thing is to start by defining the source of your images.
By default, this plugin only enables you to display images, but you can also attach a list of text or URL that goes along with those images, so be creative !
Once that's done, you can also set the number of slides per view, as well as some gap between them.
Here's the result we already have. We can see that it is already sliding very nicely !
In the end, you have a bunch of design settings, so feel free to explore them to make sure this slider's design fit your app's overall look !
Last step : Setting it to Autoplay
Now comes the last step.
If you want to make this carousel to autoplay through it's slides, simply find the "Autoplay" option in the Slider's properties and assign it a value.
This value is in milliseconds, and represents the time interval between each slides. There is no "golden value", so you will have to try some different values before finding the one you like the most !
In my case, I set it to 3000 ms and I'm quite happy with the result !
Conclusion
And there you go !
You now know the two best ways to create a carousel in bubble easily, and for free !
If you like this article, don't forget to share it with fellow Bubblers, it may be useful to them !
