[NEW PLUGIN] Repeating Group Slider

[vladimir.pak]

This plugin turns standard Repeating Group element into a slider providing actions to control it via workflows. It does not generate any predefined slide content, you are completely flexible to design your own slide structure.

Some limitations are applied to a Repeating Group under control:

1. Repeating Group must be either one-row (for horizontal sliding) or one-column (for vertical sliding) element for this plugin to work correctly.
2. For vertical sliding Repeating Group element must have some limited height, either fixed by element layout or limited by parent containers.
3. Paged repeating groups are not supported, slider will only navigate within currently displayed page.

For more details please see demo page below.

Instructions:

1. Install the plugin.
2. Put Repeating Group Slider element somewhere on the page.
3. Specify ID of a target Repeating Group element and other parameters that define sliding behavior. If you do not specify an element ID, target Repeating Group element must be along the siblings of Repeating Group Slider element.
4. Design content of Repeating Group. The size of Repeating Group item container does not matter, it will be resized by Repeating Group Slider element to fit Repeating Group viewport. You can place slider buttons inside an item of target Repeating Group or outside of it. In both cases when clicked they must invoke workflow actions provided by Repeating Group Element. User scroll is also tracked and corresponding state of Repeating Group Slider element is updated.

Demo Page: Repeating Group Slider Plugin Usage Example
Demo Editor: Repeatinggroupsliderexample | Bubble Editor
Plugin Page: Repeating Group Slider Plugin | Bubble
Service link: Codium Plugins - Repeating Group Slider

[MarkusBoostedApp]

Looking good! Just checking if repeating group can be hidden on a page load?

[lindsay_knowcode]

Very nice

[vladimir.pak]

Thanks for pointing this out. In general hidden RG is not available at the moment when plugin element tries to bind to it.
There are two options to work this around:
Option 1. If you attach slider to RG via CSS selector, leave this parameter initially blank and set it up when RG becomes visible using condition, an example is here: Repeating Group Slider Example | Hidden RG - Option 1 | Bubble Editor
Option 2. You can use implicit binding. Create a Group container with layout “Align to Parent”, place Repeating Group and Repeating Group Slider (RGS) element inside this group and leave CSS selector parameter of RGS blank. This will instruct RGS to bind to all sibling RGs that appear in the same group at any moment, in our case it’s target RG. An example is here: Repeating Group Slider Example | Hidden RG - Option 2 | Bubble Editor

I could potentially check for new RGs matching CSS selector, let’s say, 5 times per second, but I don’t like this approach as it puts some performance overhead.

Hope this helps.

[0code.zm]

Good afternoon! Thanks for the plugin, it looks like what I need. I have one question. How to make it work inside RG? I have a list of objects that have photos to scroll through, but it doesn’t seem to work inside the RG. Can something be done about it?

Thank you, I hope you can help

[vladimir.pak]

Hello, @0code.zm!
Generally, it should work but some cases may need special attention.
Could you DM me with your account email, I would add you to my testing app so you can see how it’s done?

[0code.zm]

Thanks for the quick response! [email protected]

[vladimir.pak]

I’ve added you to contributors.

Notice that you cannot reference repeating group located inside another repeating group by its Id as these ids won’t be unique.
So if we have level 1 RG (let’s call it RG1) and level 2 RG (RG2) located inside RG1, you need to wrap repeating group slider (RGS) element and RG2 with a Group element of Align to Parent alignment. In this case leave CSS selector of RGS empty, and it will attach to sibling RG2.

That should work, if I understand you configuration correctly.

[0code.zm]

Unfortunately it doesn’t work.
If you have time, I can add you to the co-authors and you can see for yourself.

[vladimir.pak]

Try putting RepeatingGroupSlider B inside Group RealEstate1 and ensure it’s CSS selector is empty.
If it affects your layout wrap RepeatingGroupSlider B and RepeatingGroup Image in new group with Align to Parent layout.

[0code.zm]

OH YEAH! Now everything works! Thank you very much for your help, you helped me a lot)

[vladimir.pak]

You’re always welcome

[kevingrand]

Hello, I’m trying to reference the current index but it’s evaluating to 0. I set it up similarly to the demo page except I’m using a regular text object and not an input field.

Any help would be great, thanks!

[vladimir.pak]

Hello, Kevin!

Form the screenshot above I can’t understand the problem. It should work if RG slider successfully binds to RG, but I can’t see it on the image.
Can you send me a read-only link to your app editor in private message, so I can see the full story? To send private message click on my avatar and then Message button.

[kevingrand]

Ok, will do. Thank you!

[vladimir.pak]

Hi Kevin!
As I understand, your “CTRL.Card Slider” does not bind to “RG.Vehicles Set”.
The problem is because controlled RG is not initially visible (i.e. is not initialized and doesn’t have corresponding element rendered leading to a slider unable to find it by its id) at the moment when page is rendered. This is an optimization that buble does for faster page rendering. I could make slider to re-scan every time when page elements appear and disappear, but it puts significant performance overhead.

I’d suggest a workaround: set CSS selector of “CTRL.Card Slider” to # (just a single hash sign) and add a condition: when “RG.Vehicles Set is Visible” set “CSS selector” to “#card-slider”. This ensures that when slider attempts to bind to a repeating group, the repeating group is available on a page and is initialized. In this case when user logs in and RG.Vehicles Set repeating group appears, bubble updates slider element and it will successfully bind to repeating group.

[bubble48]

Can I use fullscreen in the background? I need a solution to display clickable fullscreen ads similar to the ads on Wetransfer.

[vladimir.pak]

No, this plugin does not support fadein/fadeout effects.

[olzhas]

Hey bubblers!

We’re happy to announce we’ve updated our premium Repeating Group Slider plugin. New functions and more versatile customization to make your slider look perfect are now available. We do our best to keep in touch with our customers and have delivered the changes you asked for, such as new element settings, states, actions, etc., as well as completely rewritten and enhanced documentation, so you know what’s what. Make sure to check out our Demo Page and Demo Editor too.

The plugin lets you control many aspects of slide positioning and transition between slides. There are two main components to the plugin: RepeatingGroupCarousel and RepeatingGroupSlider. The former has 33 parameteres and provides great control over such aspects of a carousel view as sliding inertion, nested repeating groups, form controls, etc. RepeatingGroupSlider relies on the browser’s native scrolling mechanism and has limited functionality and flexibility, but can prove useful for some use-cases.

If you have any questions feel free to shoot us a message.

Best,
Codium Team.

[fg2023]

Hi @olzhas

I just started playing around with your plugin.

One issue I face for my use-case, having a horizontal scrolling repeating group with height set to “fit to content” but elements with different heights included, it sticks with the height of the tallest element. Any way to work around that?