How to display current and next item from a Repeating Group? Need help

Need help
1

Hey Bubble Community!

I’m trying to build something similar to a Tinder-style swipe interface where one item is shown in the front, and the next item is preloaded right behind it.

Here’s what I have in mind:

  • I’ve got a hidden repeating group that holds the full list of items.
  • On top of that, I want to show a “Current” item (the one that’s currently visible/active).
  • Behind it, I’d like to show the “Next” item (the item that comes right after the current one in the list), almost like a preview or transition effect.

I’m a bit stuck on how to structure this best:

  • Should I use 3 repeating groups, or would it make more sense to have 1 repeating group (hidden) and just 2 Groups pulling from that list?
  • I’ve figured out the visual layout, animations, and swipe logic – but I can’t quite wrap my head around the data source logic for showing item #current index and item #current index + 1 properly in the two Groups.

Any tips, ideas, or examples would be hugely appreciated!

Thanks :raising_hands:

Screenshot 2025-06-25 at 13.52.04
Screenshot 2025-06-25 at 13.52.04976×678 21.5 KB

2

@adamhholmes if you have a minute and might be able to help me with this one? :pray:

3

I’d do it this way

That’s basically exactly how I’d do it. You’ve pretty much got the correct logic in your post and diagram.

Which part of you having trouble with?

1 Like
4

Thank you Adam for the quick response! Not sure how to get the active index #? What i did now is i have a state called “index#” and default is 1, then is i go + then i do +1 if i go back -1 and that seems to work but not sure how “stable” that is?

5

Yeah, that’s exactly how it’s done.

1 Like
6

This topic was automatically closed after 70 days. New replies are no longer allowed.