Create a Carousel using Repeating Group

help · 2020-06-23T13:55:27.094Z

Hi all,

I am trying to create a Carousel type element that will display a list of things in a repeating group, but it will automatically animate through them horizontally across the page (similar to TikTok).

Is there any plugin or code I can use to achieve this?

Thanks
Reece

ambroisedlg · 2020-06-23T15:00:13.939Z

Hey @help

I guess you could try this way:

Have a state item of type number on the page, which changes to state + 1 every X seconds. When state = List’s count, set it back to 1
Set your horizontal RG (1x1)´s data source to List’s fields:item #state

Let me know if that helps

help · 2020-06-24T11:25:49.708Z

Thanks - I’ll give that a try and see if I can get it working

ambroisedlg · 2020-06-24T11:33:58.684Z

Actually I thought about it after posting, I’m not sure how Tiktok does it. This would automate a scroll to next item, not so much a ‘constant’ animation if that’s what you were looking for.

Btw the above example was based on a 1x1 RG. If you have multiple columns in your RG, you can have two states start and end states and change both every X seconds.
The RG’s data source would then look like List’s fields:from item #start :until item #end

sharma.himanshu0608 · 2020-08-08T18:10:05.210Z

The only part I feel is left is that it scrolls back. A carousel would need to continue on and on. Any workaround for that?

boston85719 · 2020-08-08T20:07:49.660Z

It scrolls back because it reaches the end of the list…only workaround would be to have a list that is infinite