RG content repeated a set number of times

[floripaolo]

Hello everyone

Since I only have 4 entry to show in a horizontal RG, I would like to repeat those 4 indefinitely when scrolling (or at least a set number of times).

like: 1-2-3-4-1-2-3-4-1-2-3…

I can’t figure out how.

Thanks for help

Paolo

[vnihoul77]

If you’re using the “Show next page” workflow I think you have a setting that lets you go back to the first item when you reached the end of the list.

If you want to achieve it with the caroussel scrolling feature, you can either do it within bubble with a fixed amount of sets, by merging the list you’re displaying multiple time (Do a Search for X merged with Do a Search for X…)
Or, what you’re most likely looking for, using CSS tricks:

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.

Classify — This plugin will remove the scroll-bar
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 perfectly.

Preview — NoCodeAssistant

Editor — Nocodeassistant-tutorials | Bubble Editor

Credits Nocoseassistant

[floripaolo]

Thanks @vnihoul77 for your reply!

I’ve seen the carousel (CSS) on some other thread. But I was actually looking for a carousel scrolling solution (without clicking). I tried the “merged with” approach but it doesn’t seem to work. It just shows the original 4 (in my case) Playlists.

Cheers

Paolo