Creating a carousel system in Bubble.io

Repeating Groups Aug 23, 2020

Most sites have a carousel system on their landing page. Generally, to showcase their clients, testimonials or portfolio. And if you have scoured the Bubble forum like me, you would have noticed that there is no complete solution out there.

Carousels are also used extensively in mobile apps. The trick in creating an infinitely rotation carousel is that you need to keep the Repeating Group items rotating infinitely. There are solutions to 'scroll' to the next item but they don't start the list from the 1st item when you reach the nth item.

Plugins needed

You are going to need 2 plugins. One to remove the scroll-bar and the other to keep the list rotating infinitely.

  1. Classify - This plugin will remove the scroll-bar
  2. List shifter - This plugin will keep rotating the Repeating Group list. This is a very handy plugin and you should explore more about this plugin's capabilities.

Setup

After you've installed the List shifter plugin, drag the List shifter plugin onto your editor. Set up the Data type and List to shift field on the plugin. I wanted a list of colors so I have set up the data source accordingly.

Create a Repeating Group and keep the Type of content what you would normally but keep the Data source as ListShifter's Shifted List. This is important as the List shifter plugin will manipulate the list that you provide to it and provide the output to the Repeating Group.

Keep the Layout style of the Repeating Group as 'Horizontal scrolling' with as many columns as you'd like to be displayed at any point.

Once this done, we need to remove the scroll-bar. Make sure that you can assign an ID attribute to your Repeating Group. If you cannot, go to Settings > General > General appearance > Check 'Expose the option to add an ID attribute to HTML elements'.

Assign an ID attribute to the Repeating Group by double clicking the Repeating Group and scrolling to the bottom.

Copy and paste this text - myGroup{addClass: "scrollClass"}

Next, drag a HTML element on the put this text in the HTML element -

Shifting elements

All that is left is for us to rotate the list infinitely. Create two 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 element click > 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


If you need some help with Bubble app, send me an email at [email protected] or follow me on Twitter

Tags