ol-carousel touch gestures and swipe physic refinements#13101
Open
lokesh wants to merge 5 commits into
Open
Conversation
Touch swipes were unreliable: starting a vertical page scroll on the carousel could fire a page navigation (pointercancel was handled as a release), horizontal swipes scrolled the page underneath, and after the first page transition the swipe surface went dead on iOS (the pointerdown listener lived on the translated track). - Resolve gesture ownership with an axis lock (8px dead zone, 2:1 horizontal bias) and preventDefault page scroll once locked - Treat pointercancel as an abort that springs home, never a navigation - Move gesture listeners to the untransformed viewport so the whole surface stays swipeable on every page - Smooth velocity (EMA over >=4ms windows, capped, stale samples discarded) so release momentum is stable - Land long drags on the nearest page; momentum carries at most one page beyond it Adds a jest suite covering the gesture state machine.
lokesh
marked this pull request as ready for review
July 6, 2026 19:43
lokesh
changed the title
ol-carousel refinements: - Deepen the cover lookahead from one page to two on the first hover or keyboard focus, so fast page-flipping stays ahead of the loaded range. Skipped on data-saver / 2g connections; fires at most once. - Add arrow-key / Home / End navigation to the page-indicator tablist with a roving tabindex (APG Tabs pattern), plus tests. - Regenerate custom-elements.json to match.
Collaborator
Author
|
@cdrini take a look when you get the chance. |
Add discrete wheel-based paging: a horizontal trackpad swipe (wheel events with deltaX) flips one page per gesture, reusing the existing spring. Only claims horizontal-dominant intent, so vertical scroll and plain mouse wheels pass through; preventDefault owns the gesture and suppresses macOS history back/forward swipe. Momentum tail is swallowed so one physical swipe pages once. Adds 7 unit tests covering direction, vertical pass-through, threshold, momentum lock, gesture-end re-arm, and line-mode normalization.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow-up polish to #13077 (no linked issue).
Low risk:
<ol-carousel>is not used on any live page yet — it only appears in the design showcase (/developers/design#carousel). Nothing user-facing changes.This refines how the carousel feels to use — mostly around touch and swiping.
carousel.mp4
Swiping feels right now
Covers are ready before you get there
Keyboard
Testing
/developers/design#carousel(use Chrome device mode for touch).Covered by 18 tests in
tests/unit/js/OlCarousel.test.js.Stakeholders
@RayBB