Hello,
Is there a way to prioritize horizontal scrolling on mobile for a slider so that when the user swipes to the next slide it doesn’t also do a vertical scroll and slide down the page?
Thanks in advance!
2 Likes
This is a problem I’ve been suffering from alot… can someone please answer this? thanks
Hey All,
Has anyone found a solution to this? I’ve scoured the forums but nothing I’ve seen resolve this issue (I could have missed something though).
I’ve created a simplistic mockup of what I’m trying to achieve. Please try this on a phone.
Live preview: https://mobile-slider-test.webflow.io/
Hoping someone can help. 
1 Like
Hi Brenski
I’m dealing with the same issue, I’ve looked everywhere but I can’t find the solution. If I get it, I’ll send it to you.
Thanks for sharing the mockup, it’s excellent to explain the point.
1 Like
Thanks Oswaldo, it would be great if you found a solution!
I’m almost giving up on this and starting to look at swiper.js - there’s a little code involved but it looks like it works perfectly on mobile. No scroll conflicts and a TON of options.
Check out the how-to on the forum:
Good luck!
1 Like
Hey there webflow comunity. I got the same issue. Is there any workaround? Or do you have planned to fix this in future updates of your roadmap? It is really annoying. I bet everybody who uses it can tell.
Try using this in your custom code body, works with the default Webflow slider:
<script>
document.addEventListener('DOMContentLoaded', function() {
var slider = document.querySelector('.w-slider'); // Replace with your slider's class
var isScrolling;
slider.addEventListener('touchstart', function(e) {
var touches = e.touches[0];
startX = touches.pageX;
startY = touches.pageY;
isScrolling = undefined; // Undefined at the start of a swipe
}, false);
slider.addEventListener('touchmove', function(e) {
if (isScrolling !== undefined) {
return;
}
var touches = e.touches[0];
var deltaX = Math.abs(touches.pageX - startX);
var deltaY = Math.abs(touches.pageY - startY);
if (deltaX >= deltaY) {
e.preventDefault(); // It's a horizontal swipe, prevent default scroll behavior
isScrolling = false;
} else {
isScrolling = true; // It's more vertical, let it scroll
}
}, { passive: false });
});
</script>
How This Works:
Touch Start: It records the starting point of a touch.
Touch Move: It calculates the difference in horizontal and vertical movements. If the horizontal movement (deltaX) is greater than the vertical movement (deltaY), it considers the action a horizontal swipe and prevents the default behaviour (scrolling up/down). Otherwise, it allows the touch to be interpreted as a vertical scroll.
This script allows users to scroll vertically unless a clear horizontal swipe gesture is detected. Adjusting deltaX and deltaY can help in tuning the sensitivity of swipe detection, depending on your specific needs.
Remember to replace .w-slider with your slider’s class name if it differs.