# How to swipe to next cell on horizontal RG?

**URL:** <https://forum.bubble.io/t/how-to-swipe-to-next-cell-on-horizontal-rg/322044>\
**Category:** Responsiveness\
**Created:** [May 13, 2024, 4:44am UTC](https://forum.bubble.io/t/how-to-swipe-to-next-cell-on-horizontal-rg/322044 "2024-05-13T04:44:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![omerbialer1](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/omerbialer1/32/200219_2.png) [@omerbialer1](https://forum.bubble.io/u/omerbialer1)\
**Post date:** [May 13, 2024, 4:44am UTC](https://forum.bubble.io/t/how-to-swipe-to-next-cell-on-horizontal-rg/322044/1 "2024-05-13T04:44:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![senecadatabase](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/senecadatabase/32/260991_2.png) [@senecadatabase](https://forum.bubble.io/u/senecadatabase)\
**Post date:** [May 13, 2024, 7:42am UTC](https://forum.bubble.io/t/how-to-swipe-to-next-cell-on-horizontal-rg/322044/2 "2024-05-13T07:42:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![omerbialer1](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/omerbialer1/32/200219_2.png) [@omerbialer1](https://forum.bubble.io/u/omerbialer1)\
**Post date:** [May 13, 2024, 9:33am UTC](https://forum.bubble.io/t/how-to-swipe-to-next-cell-on-horizontal-rg/322044/3 "2024-05-13T09:33:58Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![senecadatabase](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/senecadatabase/32/260991_2.png) [@senecadatabase](https://forum.bubble.io/u/senecadatabase)\
**Post date:** [May 13, 2024, 9:56am UTC](https://forum.bubble.io/t/how-to-swipe-to-next-cell-on-horizontal-rg/322044/4 "2024-05-13T09:56:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![omerbialer1](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/omerbialer1/32/200219_2.png) [@omerbialer1](https://forum.bubble.io/u/omerbialer1)\
**Post date:** [May 13, 2024, 11:19am UTC](https://forum.bubble.io/t/how-to-swipe-to-next-cell-on-horizontal-rg/322044/5 "2024-05-13T11:19:36Z")

</div>

OK great I will check it out, thanks!

---

<div class="post-metadata">

**Author:** ![omerbialer1](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/omerbialer1/32/200219_2.png) [@omerbialer1](https://forum.bubble.io/u/omerbialer1)\
**Post date:** [May 16, 2024, 4:50am UTC](https://forum.bubble.io/t/how-to-swipe-to-next-cell-on-horizontal-rg/322044/6 "2024-05-16T04:50:31Z")

</div>

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 👇🏽

Thanks for the help

> **[Repeating Group to snap Plugin for Bubble, by No Code Guru](https://bubble.io/plugin/repeating-group-to-snap-1596324636422x141512731855945730)**
>
> Repeating Group to snap Plugin page on Bubble, by No Code Guru. Add Repeating Group to snap in one click to your app. Bubble lets you build web apps without any code.