React-slick: Horizontal stick threshold

[mthines]

Hi!

I've been try to create an horizontal slider to browse tags on touch devices.

Unfortunately the way it sticks is very aggressive and it makes it difficult to slide to the next tags. You have to slide far into the next tag in order for it to stick to it. See gif below.

My slick settings

arrows: false,
infinite: true,
variableWidth: true,
slidesToShow: 1,
slidesToScroll: 1,
swipeToSlide: true,

Question:

Does anyone have a settings, solution or another way to solve this issue?

Thanks!

[WilliamHolmes]

maybe try adding { ..., cssEase: 'ease-in-out', ... }

[mthines]

@WilliamHolmes without knowing what this setting does, I would think that it changing how the animation behaves, and what I'm looking for is how the tags sticks.

Nevertheless, thanks for the suggestion, I will try this out and get back to you.

[mthines]

@WilliamHolmes, sorry I forgot to get back to you.
This does not solve the issue :)

Is it possible for the slider not to stick to items?

[akiran]

Can you try varying touchThreshold setting.
By default it is 5.
Try smaller touchThreshold value and see if it works

[mthines]

Alright @akiran, I'll try this out.

Thanks!

[mthines]

I increased the touchThreshold to 100 and it not works perfect.
Thanks for the help @akiran