Create a Carousel using Repeating Group

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

Hey @help

I guess you could try this way:

  1. 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

  2. Set your horizontal RG (1x1)´s data source to List’s fields:item #state

Let me know if that helps

1 Like

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

1 Like

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

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?

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