[NEW PLUGIN] Repeating Group Slider

Sounds great! Looking forward to it.

Turning the upper-level element group into a reusable element seems to encounter another issue. Your “BannersSliderNavigationItem” won’t work within the reusable element, I think…

[Update1]
Animation withEvery 3 seconds is sluggish. So I wait for your built-in function for the use.

I was wrong! It worked great with your suggestion! I just needed to erase the conditional statement first, and then re-selected the “RepeatingGroupCarousel A”. Now Every 3 seconds animation is good to go! Thanks!

1 Like

Hi @vladimir.pak. I [am trying to build a simple time picker using repeating groups, similar in look to the attached image. I want to be able to display three rows of data for each column. I have no problem getting the repeating group carousel to work, but I have not been able to figure out how to display three rows. I tried resizing the repeating group, but that just increases the gaps between each row. I have been spinning my wheels trying to figure it out.

Any help on the correct settings to achieve this functionality would be greatly appreciated.

Best,

Naveen

image

Hi, @naveenreddyla.

Hard to tell what exactly doesn’t work without looking into the app. Did similar exercise here, please take a look and let me know if it helps.

1 Like

Thank you for the quick response - and understood not being able to determine the issue from afar without looking at the app.

I’ll take a look at the demo that you just sent. That is exactly what I’m looking for, so I am sure I will be able to work it out.

Naveen

Ok, good.
Don’t hesitate to ask any questions about the implementation. There are tricks with CSS and state handling that might need some explanation.

I was actually able to achieve what I wanted by simply changing two settings - active slide height and inactive slide opacity. Hopefully this can save someone else some time. In any case thanks for your assistance.

image

thanks for making great plugin!
I’m using your plugin well.
I’d like to know how I can view the next slide in the repeating group !
like below screen shot yellow line
スクリーンショット 2024-01-18 111522

Hi, @lifeshot92! Thanks for using it.

I’m not sure I get you problem correctly…
Do you want the next slide to be partially visible when current slide is on its place? Or you don’t see next slide when dragging item (which you obviously should be able to see).

In the former case you need to play with active and inactive slide width setting it to:

  • something like 0.8, meaning 80% of the viewport;
  • to fixed pixel value less than the slider’s width;
  • or to 0 (zero) to fit it’s content, this option is less preferable as intrinsic width may require additional step to calculate.
    Choose one the fits best in your layout setup.

In the latter case I’d need a bit more info to understand if it is a settings problem or a bug. Particularly I would appreciate a link to a version-test page and a screenshots of the settings pane of a plugin element.

1 Like

hey
thanks for reply

Can I view this review?
I can’t access below link !

It would be helpful for me if I could see that link!

And I hope there will be a change in the height of the rp according to the sub-content of the repeating group.

So, I took the option as below, but there is no change in my repeting group.

The first slide comes out as shown in Figure 1, and the text of the second slide is less than that of the first slide, so I hope the red part is gone (reduced).
Can you give me some advice on this?

below is my editor mode

Thank you

1 Like

Hi @lifeshot92 !

I’m sorry for late reply.
Please, try changing Active Slide Height and Inactive Slide Height to 0 (zero) and let me know if it helps.

Hey bubblers,

I don’t know if I’m doing something wrong, but when I use the element, it only shows 1 slide at a time, and even when there is more space in the repeating group area.

Please see this video.

I understand that this is an appropriate configuration.
image

Can anyone give me a clue as to what I may be doing wrong?

hi, @rodny098!
Thanks for using the plugin.

You need to manipulate Active Slide Width and Inactive Slide Width settings instead of Visible Slides.

  • An absolute value greater that 1.0 means value in pixels, e.g. 250 indicate that slide width will be set to that pixels value;
  • A value from 0.0 to 1.0 indicates percentage value relative to either slider’s view port width (default), Inactive Width or some more advanced variants (please see the docs for Slide Width Relative To).
    If you want 3 slides visible at a time, set their values to something like 0.33, then play around with gaps if needed.
  • A 0 value indicates that slide container should fit its width to its content. This is something you can start with, but it less performant if you have dynamic content on your slides.

P.S. Don’t forget to clear Visible Slides setting.

Advanced

Slider adjusts size of slide container, not the card that you place into a repeating group cell. Container is some internal element when using repeating groups, it’s generated at runtime and represents a cell with all the content you might place in there. You can highlight container to ease debugging using active border settings:

  • Active Border Stylle: SOLID
  • Active Border Width: 1
  • Active Border Color: black (just type black into the field)

This should help understanding the layout.

The setting you are referring to limits number of visible slides in a viewport to, let’s say, N even if there are more than N slides can be placed in viewport. After you mentioned your use-case I see the need to update the documentation to articulate that more clearly, thank you for sharing it.

This is an optimization setting that has been introduced to reduce performance overhead for animations like flipping where all slides taking the same position and thus all of them are visible in terms of Intersection API, though at most 3 of them (prev, current and next) should be processed at a time because others are not visible in terms of Z-index.

Sorry for the inconvenience. Please let me know of this helps. And if it doesn’t, DM me a link to your version-test app and a screenshot of slider settings, so I can take a closer look.

that worked :smiley: thanks

1 Like

Hey @vladimir.pak,

I’m using the Repeating Group Carousel (in vertical scroll) and everything seems to work pretty well except for one strange bug. After scrolling through exactly 12 items, it starts glitching. Items start piling on top of each other. I’ve tried toggling almost every setting. Disabling optimization prevents the effect of items pilling on top of each other, but it still glitches out, showing the wrong images/text and randomly showing the first item with every scroll. PS: tested on multiple browsers and devices.

Would really love to use this plugin if we can get this issue resolved.

Happy to DM images and video of the issue if needed?

Thank you,
Mikhaeel

Hi @mikhaeel,
Sorry for inconveniences you’'re experiencing.
May I have a link to a version-test page to see it myself?

Hey! Thanks for the quick reply. Sent you a message with the test page link.

Thank you!

Hi Mikhaeel,
Sorry for a delay, it took some time to debug. It seems that there are some issues in your layout. I’m posting results here for our users to be aware and avoid them in future.
I would need access to the editor of your app to indicate particular problem, but most probably you have put Repeating Group Carousel element inside a repeating group cell. Once slider container (RepeatingGroup) loads its items, it creates 15 Repeating Group Carousel elements, one for each cell it initially loads, all attached to the parent Repeating Group instance with id = products. When user starts interacting with slider, those 15 Repeating Group Carousel instances start competing for control over the RepeatingGroup container and you see it as a glitch.
What you need to do is take Repeating Group Carousel element outside of a RepeatingGroup’s cell. I can suggest particular solution if you DM me a screenshot of your RG slider layout.

You can peek at possible approaches on plugin demo page or in the documentation.

Hi Vladimir,

I apologize for the delayed reply. Thanks for taking the time to figure out the issue. Your evaluation is correct. I placed the Repeating Group Carousel element within my repeating group. Simply moving it outside the RG (into the parent element) resolved the issue.

Thank you so much for your help!