Swiping the carousel to the left and right using the mouse or touch gestures felt jittery and uncomfortable compared with native UI or horizontal scroll areas. This PR makes those gestures feel more like what users expect from native UI:
using inertia calculations to enable quick flicks of the finger to scroll the slides that a simple endPosition - startPosition > threshold formula would normally ignore. Swiping multiple slides at a time is also now possible.
The carousel now "sticks" to your finger regardless of whether you already exceeded the threshold, or touched in the middle of a sliding animation.
A couple bug fixes from this PR:
The carousel width used in threshold detection was often stale, resulting in very little dragging needed to trigger carousel movement. Now the threshold works as expected.
disableEdgeSwiping now works with cell alignments of center and right.
setting dragging={false} will no longer disable carousel swiping on mobile (swiping={false} is the way to do that).
Type of Change
[x] Bug fix (non-breaking change which fixes an issue)
[x] New feature (non-breaking change which adds functionality)
How Has This Been Tested?
Running storybook locally and opening it on my phone, testing it in desktop browsers, new cypress tests.
Description
Swiping the carousel to the left and right using the mouse or touch gestures felt jittery and uncomfortable compared with native UI or horizontal scroll areas. This PR makes those gestures feel more like what users expect from native UI:
endPosition - startPosition > threshold
formula would normally ignore. Swiping multiple slides at a time is also now possible.A couple bug fixes from this PR:
center
andright
.dragging={false}
will no longer disable carousel swiping on mobile (swiping={false}
is the way to do that).Type of Change
How Has This Been Tested?
Running storybook locally and opening it on my phone, testing it in desktop browsers, new cypress tests.