Tiny-slider: Mobile swiping enhancements (vertical lock and performance)

[nireve]

__Issue description__:
There are a couple of issues when you swipe left or right on mobile:

1. the page can scroll vertically because people don't usually make accurate horizontal gestures, however if it is not intended it can hurt user experience.
2. the animation sometimes feels a bit janky as well, even on powerful phones.

It would be nice to have the swiping experience on mobile closer to or on par with Slick, especially that they did with vertical locking once the user start swiping left or right, and the smooth animation.

See: http://kenwheeler.github.io/slick/

Fantastic work so far but with these improvements it would be a killer! Thank you very much.

[ganlanyuan]

I was struggling with these two actually:
a. move freely while the slider may unexpectedly move left or right when you scroll the page within the slider
b. vertical locking while it feels not so smooth
I finally chose b while slick you mentioned chose a.

vertical locking once the user start swiping left or right

Does it against smooth scrolling?

[khryshyn]

Swiping doesn't work properly - it is very slowly, sometimes items aren't scrolled at all.
Please check it on the demo pages using the Ipad

[ganlanyuan]

sometimes items aren't scrolled at all

This is probably because the slider didn't finish its transform while you swipe it again 😃

[khryshyn]

The issue with a poor user experience that was reported by danny7i also reproduced with my touch devices. We'll really appreciate if you fix that problem. Thanks

[ganlanyuan]

Add a new option swipeAngle in this commit.
You now can set swipeAngle: false to achieve this.
Please let me know if this helps. Thanks

[khryshyn]

ok, thanks, let us check!

[khryshyn]

Thanks a lot! Swipe is working more predictable now, but vertical lock is still the ux problem for users. While you swiping the carousel the website still able to change the scroll position.

[ganlanyuan]

Hey, I will not add this since it against smooth scroll

[paulvonber]

@ganlanyuan Why you're not using 3d transforms? that could improve overall sliding experience.

[ganlanyuan]

Can you give some examples?

[paulvonber]

now you use only transform X,Y
transform: translateX(-40%);
but if you will use:
transform: translate3d(-40%, 0, 0);
it will enable GPU and the sliding itself will be much smoother, as now it struggling a bit and it's really visible.

[ganlanyuan]

I see, thanks
will update this in the next release

[ganlanyuan]

@entwicklerRepo Switched to 3d transform in this commit, will be available in next release.

[ganlanyuan]

Just add an option preventScrollOnTouch with three available values: "auto", "force", false.
With "force", page scrolling will always be blocked.
With "auto", the slider will first check the swipe direction, then decide to block the page scrolling or not.