When I was recently working on a client project, the client needed a section for testimonials. And they did not want just a few simple static cards. They wanted a carousel.
A carousel is a rotating set of items, typically used to display items on a web page.
By using the buttons, you can view the next set of items.
It looks simple, right?
And if you have played around with the repeating group in Bubble, you would know that there is a 'Scroll to entry' action in the workflows. We can keep scrolling up and down the list, and it should work.
It could work in some cases. But we need an infinite scrolling repeating group that goes on forever. We need to do a bit more work.
Steps to create an infinite carousel
- Setting up the database.
- Installing the List shifter plugin.
- Creating a repeating group.
- Workflows to rotate the list.
Database structure
In our Bubble app, we have a data type called Testimonials.
This data type stores the body of the testimonial, the picture, and the company name of the testimonial provider.
We will show testimonials from our database in a carousel.
A plugin that we need
Before we get down to setting up our repeating group, we need to install the List Shifter plugin by Keith.
Bubble
This plugin is convenient, and you can do many things with lists. After installing it in your app, you can place the 'List Shifter KW' element on your page.
We will set the type of content and data source for the repeating group in this plugin element. And then use this plugin's output as the data source of our repeating group. This plugin will take our list and do operations, giving us a 'Shifted list'.
Repeating group structure
The List Shifter plugin will give us a list of customer testimonials. We'll use this 'Shifted list' as the data source for our repeating group.
We need to keep a fixed number of rows for a carousel but an infinite number of columns.
Inside the repeating group, we have one child group. We will assign a minimum width to this group. I've kept it at 500px and added a condition to reduce it to 300px when the page shrinks.
We now have to add text and image elements to create our repeating group design. The final result looks like this.
Workflows
All that is left is for us to rotate the list infinitely. We can add icons on the left and right of the Repeating Group to rotate the list.
For the icon which will rotate the list clockwise, create a workflow on the element > Element actions > Listshifter > Rotate List
To rotate the list Clockwise, we need to rotate the list by -1
To rotate the list Anti Clockwise, we need to rotate the list by +1
That's it. Your carousel should now work perfectly.
Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/carousel
Editor - https://bubble.io/page?type=page&name=carousel&id=nocodeassistant-tutorials&tab=tabs-1
Himanshu Sharma
If you need some help with your Bubble app or a team of Bubble developers to build a Bubble app for you, reach out to me at [email protected]. You can also follow me on Twitter.
Join the conversation.