[NEW PLUGIN] Repeating Group Slider

Hi, @jos2 !
We published public preview of new version of the plugin with support of fit to content feature among other improvements. Now both width and height fitting to content work in any orientation. Please update the plugin and give it a try.

Hi @vladimir.pak

Very nice! This works perfect, also the custom scrollbar is exactly what i was looking for! I will implement it next week, if i have further questions for the correct settings i’ll let you know.

thanks again!

1 Like

Hi, All!

I’m about to publish an update to Repeating Group Carousel element that will respect Minimum column width and Minimum row height settings of the corresponding Repeating Group. This may affect the behavior of corresponding Repeating Group element that might need a bit of your attention.

These settings are forced by the Repeating Group to its items (so there is no way to disregard them) and may conflict with Active/Inactive Slide Width/Height. Moreover, this conflict reveals only after a new element is added to a Repeating Group, complicating its discovery.
To make a possible problem appear at the earliest stage an upcoming update (version 1.14.5+) changes layout algorithm so that Minimum column width and Minimum row height settings of the corresponding Repeating Group are respected when calculating size of Repeating Group items and may cause some layout dislocations if Active/Inactive Slide Width and Height are not consistent with Minimum column width and row height respectively. If this is the case, please check these settings to eliminate possible conflict (as the simplest way, set Minimum column width or Minimum row height to zero).

1 Like

Hey, amazing work with the Plugin. Have found it so useful - so thank you! My one question is around whether there’s a way to maintain the aspect ratio of an image when resizing between an active item and an inactive item in a repeating group carousel. At the moment images and text get squashed when moving from active to inactive

I tried turning the CSS scaling off but it ruined how the content was displayed - is there any work around?

Hi, @samueljon3s!

Glad to read you find it useful. Can I see your RG Carousel element settings? Especially, Active Slide Width/Height and Inactive Slide Width/Height?

When scaling is enabled, the inactive item is scaled horizontally by a factor = Inactive Slide Width/Active Slide Width and vertically by Inactive Slide Height/Active Slide Height. So, if you set Active Width to 100 and Inactive Width to 80, then horizontal scale factor is 0.8, and you can maintain the same scale factor vertically setting up appropriate Active and Inactive Slide Height.
You might experience some difficulties if you set Slide Width/Height to zero (i.e. Fit slide to content feature). I’m currently working on that problem and going to add an option to choose what Inactive Slide Width/Height setting is relative to - a viewport or an active slide width/height - when is set to a value between 0 and 1. That would solve your problem, as I understand it. But, please, post a screenshot of your slide width/height settings on the Carousel element to be sure I understand correctly.

P.S. Though it’s obvious, I’l mention it just to be completely clear: keeping the same scale factor horizontally and vertically is equal to keeping same aspect ratio.

1 Like

Hi, @samueljon3s!

We rolled out an update with two new settings: Slide Width Relative To and Slide Height Relative To that you can set to ACTIVE WIDTH and ACTIVE HEIGHT value respectively to enable Inactive Slide Width and Inactive Slide Height to be specified as a share of slide’s active width and height, whether Active Slide Width and Active Slide Height are specified explicitly or fit slide content.

1 Like

Thanks so much for the response. I have it mostly working now. It was entirely my own fault for setting the contents of the slide to fixed rather than using rows/columns. Rookie error!

For my use case I needed to be able to transform content from a 9:16 active slide, to a 1:1 inactive slide. When my content was set to “fixed”, the CSS scaling was obviously squashing it, but now I’ve changed that I’ve been able to turn CSS scaling off.

I am nearly there but just finessing slightly. You might have some thoughts on how to make it work. I feel like my use case might be a bit of a fringe request, so I’ll message you separately.

Thanks for making such a great plugin. :star_struck:
Thanks to your plugin, I used your plugin to create what I want to make.

As a request, I found a minor bug in your plugin.
How can I pass on the details of the bug to you?

Hi, @tommy1!

Glad to hear you like it and sorry for the inconveniences.

You can send me a screenshot or screen video record (I mostly use Loom to make it) displaying the issue, and a link to the page for me to investigate the runtime, if it’s possible.
As there are a lot of parameters it’s hard to catch them all, so if you can record screen video, please scroll the Appearance tab of the plugin element so I can see them all.

Hello Vladimir Pak.

Thank you very much for your very quick response.
I am very satisfied and grateful for your plugin.
Below is a minor bug(? maybe…) I found.

[Settings]

  • Stored items to display: 8
  • Number of items per page: 5
  • So… Page 2: Show only 3 items
    (show partial list on last page if needed) – “checked”
  • Only one item displayed per screen

[Problem]

  • When moving from page 2 to page 1, I want to display the last (5th) item on page 1.
    So I set the repeating group’s page to page 1. & Set to display the last item (5th) of the carousel.
    image001

스크린샷 2023-04-11 오후 10.22.10

But instead of the 5th item on page 1, it was showing the 3rd item (index of the last item on page 2).

[Cause]
It is assumed that the carousel is displayed before the data of the repeating group is finished loading.
Because after I pause 1000ms after paging in the repeating group and change it to display the carousel, the last item is displayed correctly,
image003

thank you.

Thank you, @tommy1 !

You’ve already done half of the work with your research :slight_smile:
I’ll take a look and, most probably, push an update in the coming days. But you still may experience some side effects of the items being loaded asynchronously that are out of my control. Most probably, after my update slider will slide to the target item gradually once next portion of slides are loaded by RG. Usually, RG loads items quickly so users should not notice, but if it’ll stuck for a couple of seconds getting next portion, you’ll be seeing incorrect item for this period.

I’ll update you when update is ready.

Thank you very much for your very quick response. :heart_eyes: :heart_eyes: :heart_eyes:

As you said, the bubble’s repeating group is loaded asynchronously, so if I scroll to the screen before loading is complete or move an item after moving the page, the problem occurs.

If bubble.io provides an event to notify completion of the loading of the repeating group or gives an option to wait for the workflow while loading data, it seems to be a solution…

In my opinion, this may not be your problem.

Anyway, the method I’m currently using is crude, so I’ll wait for your update.

Thanks again. :+1:

The problem is that to make RG load next portion of items I need to make last available item visible. So I can’t just wait for the RG to load the whole page, I need to do actions that produce side effects visible to user. And I don’t know any other way to make RG load the rest of the page from inside the plugin element. When RG is not paged, there’s an option “Show all items immediately”, but it disappears in paged mode. If you don’t need the slider to show items in realtime, you can mimic paging using “:items from #”, “:items until#” and “:make static”, but in this case user needs to reload the page to see any updates made in DB. This also requires some assessment of the impact on number of WU consumed under latest new Bubble pricing model as it may cause loading the whole list every time. I don’t know if :items from and :items until operations are optimised at the DB level, but this is something I can ask the support team about.
Let me know if this approach is acceptable and you need assistance implementing it. It’s more consistent even compared to my future update.

Great plugin. A question regarding performance: For repeating groups with many items, do I need to load them all at once or can I use Bubble’s native lazy load?

If not, does your plugin offer any lazy load feature, for example, only displaying the first item of the slide when the page loads, and showing the others only when the user takes action. That would be perfect for fast page loading.

Hi, Dan!

You can use native lazy load, but there are some limitations so far:

  • if you want to loop your slides, moving back to last slide when lazy load is turned on shows last slide available, not the actual last item in the underlying lookup query;
  • moving to a slide # using Show action behaves like there are only those slides that have been loaded so far.
    If you don’t loop your slides and don’t use Show action, then it’s fine. I’m working on some solution related to looping + lazy load, but Show slide # + lazy load is a problem. This plugin isn’t a best fit in this case.
1 Like

I have a vertical repeating group of photographers, each cell of which contains a horizontal repeating group of available times. The carousel plugin works beautifully until one clicks the third or 4th date (repeatedly changing photographers and times with many complex calculations). At that point the plugin will stop displaying the times for some photographers but not for others.

If I inspect the repeating group it still contains all the times. They just don’t show on screen. Removing the plugin solves the issue. (but now my scrolling buttons don’t work)

Is there a way to “refresh” everything so that it displays the repeating groups the same way it does upon first load (it never fails upon first load) I have tried refreshing the group that the repeating groups are in to no avail.

Hello @jeffmccutcheon!

Thanks for using the plugin.
Could you provide a link to your app (version-test) so I can click through?

Hey @vladimir.pak your plugin is awesome.

I had an issue with vertical scrolling, I have an app, which has a TikTok-like feed, where users can scroll items in a vertical manner, single item at a time.

But when I scroll the mouse wheel, it scrolls multiple items and goes 2 items or 3 items forward not showing the next one. even with a touchpad. when I swap with up/down it moves to the next 3rd item in the list.

how can i bypass it to just show the next item?

Hi @vladimir.pak , great plugin!

I cannot make “auto-slide” with every 3 seconds in workflow. The issue is that the RG element is not shown since it is a nested element.

Screenshot 2023-09-07 at 8.43.26

I could successfully bind the RG with RepeatingGroup Carousel A tho.
Any suggestion?

Hello, @rio!

As I understand your slider is in a cell of another repeating group…
Sounds like a case to introduce built-in auto-sliding functionality, I’ll add parameters for it.

Meanwhile, you can turn content of an upper-level cell (that slider resides in) into a reusable element passing cell data thing to it. This is not a universal approach, but a workaround for most scenarios. You then should be able to access slider inside that reusable element’s workflow.

1 Like