nuka-carousel icon indicating copy to clipboard operation
nuka-carousel copied to clipboard

Cannot do scroll horizontal with the flag swiping as we did before with dragging

Open FauricioValencia opened this issue 1 year ago • 9 comments

Is there an existing issue for this?

  • [x] I have searched the existing issues

Code of Conduct

  • [x] I agree to follow this project's Code of Conduct

Code Sandbox link

https://codesandbox.io/p/sandbox/x84gy5

Bug report

I'm trying to do a poc of concept, but when I try to move the slides with the mouse instead of dots, it doesn't work even if I add the flag of swiping={true} as I show in codesandbox.

video of error

https://github.com/user-attachments/assets/dddd8a32-912a-438f-80a8-7bc89f96d7fe

FauricioValencia avatar Mar 04 '25 06:03 FauricioValencia

hi, i came across the same issue when upgrading from 7.00 to 8.2.0. Did you manage to solve this?

ivanyufen avatar Apr 03 '25 04:04 ivanyufen

The examples in the documentation don't work either: https://commerce.nearform.com/open-source/nuka-carousel/docs/api/swiping

BlackGlory avatar Apr 06 '25 11:04 BlackGlory

Replacing these three events with onPointerUp, onPointerMove, onPointerDown works. https://github.com/FormidableLabs/nuka-carousel/blob/e839a97883f06cd29d3a537b51e5ffb67216649c/packages/nuka/src/Carousel/Carousel.tsx#L191-L193

Is there a reason for using touch events?

BlackGlory avatar Apr 06 '25 13:04 BlackGlory

Replacing these three events with onPointerUp, onPointerMove, onPointerDown works.

nuka-carousel/packages/nuka/src/Carousel/Carousel.tsx

Lines 191 to 193 in e839a97

onTouchEnd={onTouchEnd} onTouchMove={onTouchMove} onTouchStart={onTouchStart} Is there a reason for using touch events?

but you suggest to do the change directly on the node package, right?

FauricioValencia avatar Apr 15 '25 04:04 FauricioValencia

Is there a reason for using touch events?

on the version v7 just to work of this way, using the mouse to move the slides.

FauricioValencia avatar Apr 15 '25 04:04 FauricioValencia

The mouse does not trigger touch events, at least in Chrome (135.0.7049.84) on Windows 10.

BlackGlory avatar Apr 15 '25 05:04 BlackGlory

Replacing these three events with onPointerUp, onPointerMove, onPointerDown works. nuka-carousel/packages/nuka/src/Carousel/Carousel.tsx Lines 191 to 193 in e839a97 onTouchEnd={onTouchEnd} onTouchMove={onTouchMove} onTouchStart={onTouchStart} Is there a reason for using touch events?

but you suggest to do the change directly on the node package, right?

I usually use patch-package to fix problematic packages in the JavaScript ecosystem

BlackGlory avatar Apr 15 '25 05:04 BlackGlory

This is (currently) intentional that swiping only works on mobile devices, per the docs.

By default the carousel will allow you to drag the carousel to the next slide. You can disable this by setting the swiping prop to false. This is only enabled on mobile devices.

However, we could think about an option to expand the API to support swiping on the desktop by changing the API to support expanded options. Retaining boolean is required for backward compatibility.

- swiping?: boolean | null | undefined;
+ swiping?: boolean | "all" | null | undefined;

carbonrobot avatar Apr 15 '25 13:04 carbonrobot

there is any plan to add the option for swiping?

FauricioValencia avatar Apr 15 '25 16:04 FauricioValencia