React-slick: Slides are sliding horizontally when scrolling vertically?

[ghost]

Hi Akiran,

I am using react-slick for my react application and its working fine. But there is an issue I got that when I scrolled vertically tiles/slides are sliding left to right which is a big worry for me.

Can you please give me solution for this so that I have continue with react-slick for slick slider?

Thanks,
Vijay

[vijaybarnwal]

Any update on this?

[edencorbin]

I had no issue with this, and have vertical sliders did you set both vertical and verticalSwiping?

[naltatis]

I think @ghost is talking about a horizontal slider that accidently gets moved, when the user touches it while scrolling vertically through the page.

https://jsfiddle.net/kirana/20bumb4g/

The original slick slider has an option called touchThreshold, which makes this behaviour configurable. This has not been ported over to react-slick yet. I would also like to have this option.

see also #631

[thiagocoelho]

@naltatis I think that will take some time to be fixed...

See kenwheeler/slick#1252

[thiagocoelho]

Finally it's fixed! kenwheeler/slick#1252

[sanjredfield]

Port of this fix: https://github.com/akiran/react-slick/pull/735

[briziel]

Hi, any news on this?

[artyom-dorokhov]

@akiran when are you going to release a new version with the fix for this issue?

[RonnyO]

This was released with 1.5.0, thanks everyone! Much appreciated.

It might belong to a new issue (and might belong nowhere as this isn't a feature of Slick), but if this magic number of 4 could be made configurable it would be great, I find it too restrictive.

[akiran]

@RonnyO It can be configured with touchThreshold option

[RonnyO]

Wow, thanks for the rapid fix! That's impressive (and we're on a sprint's last day so this can actually be deployed very soon) :sunglasses:

I might be missing something - touchThreshold should determine how much of the item I need to swipe for the action to take place, not sure if it should affect this accidental-swipe-by-scroll prevention. When trying this new version with values of 2 or 200 I didn't see any difference, and the usual impact of this setting seems to stop working.

[akiran]

@RonnyO Released 0.15.1 version with this fix
Can you try it

[RonnyO]

Thank you, but there's no change - I tested the code earlier, and I believe the previous code was in the right direction, but just the 4 should have been configurable (from some other prop, say scrollThresholdToPreventSwipe or whatever. What do you think?

[akiran]

I rolled back the change and used 4 for now.

Original slick library is also using 4. So its better to keep it like that