How to swipe to next cell on horizontal RG?

Need help Responsiveness
1

Hey!

I have an horizontal RG with 1 row and unlimited columns with a width of 100% so each cell fills up the entire page

When user’s scroll right or left the can go to the next cells.

My problem - the swiping can stop in the middle of two cells. I want them to see only entire cells so if the scroll even just a bit - they go all the way to the next cell. Kinda like swiping on tinder or scrolling on tiktok

Now I know there are swipe detectors plugins but I want to make sure my solution is correct

The issue with the swipe detectors is that they will need a top layer group above the entire cell that will detect the swiping, but there are buttons to be pressed on the cell so I don’t want to block them by the top layer group

The solution I have in mind is the following.
putting a top group layer which will detect the swiping trigger to do the scrolling while putting some css code to enable clicking through the top layer group

Any better ideas on how to solve this?

  • The RG has unlimited number of columns so the next cells are outside of the screen. This allows me to see the scrolling of the cells and makes it feel more natural
2

I think the most common approach would be to add CSS to the overlay group…

.clickable-through {
pointer-events: none;
}

then use Javascript to control the scrolling.

1 Like
3

Thanks!

so just making sure, would that alow me to

  1. Detect swipes with the top group
  2. Click on buttons below the top group?
1 Like
4

Yes. The overlay group would detect the swipe gestures and allow you to click on buttons below the group…then you could format scrolling the way you want by using JavaScript.

1 Like
5

OK great I will check it out, thanks!

6

Update: after trying some custom css code, nothing really worked well

Eventually I found the Repeating Group Snap plugin wich just did the just straight away - I reccomend it :point_down:t4:

Thanks for the help