Eunomia v1.0.0-beta.2
AllAngularReactNext.jsJavaScriptVue
EunomiaSalmonForestVioletOceanGoldFireCustom…
🇬🇧 English🇫🇷 Français

Mobile swipe testing

A test harness for the live-tracking touch swipe on eun-tab-group and eun-image-carousel. This is specifically a mobile/touchscreen gesture, not a general click-and-drag: it only ever responds to a genuine touch pointer (a finger on a phone or tablet, or a browser's touch-emulated pointer), exactly like every other touch-swipe surface in this library. A mouse or trackpad drag over either demo below does nothing at all, by design, since that pointer type is left alone everywhere this gesture is used.

Open this page on an actual phone or tablet, or switch your browser's devtools into its mobile device emulation (most let you throttle the pointer down to a real touch pointer, not just a resized window), then drag left or right anywhere over either demo below. Switching to a phone-width viewport this way also shrinks both demos down to that narrower width, since they're full-width elements: that's the page laying out at a real mobile size, not a rendering issue.

Both demos track the finger 1:1 for the whole gesture rather than only reacting once it ends: release past the swipe threshold to commit to the next/previous panel or image, or short of it to spring back. Dragging past either end meets resistance instead of doing nothing, and dragging mostly vertically instead releases the gesture back to the page's own scroll, so a swipeable demo nested in this scrolling page never traps it. Neither demo below changes how click, keyboard, or (for the carousel) mouse/pen dragging behave: this is purely an additional touch input, on top of everything that already worked.

Tabs

Swipe left/right over the panel below to move between the four tabs. The incoming neighbor panel tracks right alongside the current one, so both are visible mid-drag instead of one replacing the other in a jump.

One Two Three Four
Panel one: swipe left
Panel two
Panel three
Panel four: swipe right

Image carousel

Swipe left/right over the main photo below to page through the gallery of 5 images. This narrower viewport also gives a good look at the carousel's own mobile layout, worth comparing against how it looks at a full desktop width on its own page.

See also