Feat / swipe optimizations, features and fixes

[ChristiaanScheermeijer]

This PR is based on #47 with some additional improvements and features.

The main problem with the transition between the swipe velocity and animation is that the speed needs to correspond with the swipe speed. In other words, if a user swipes with a velocity of 5 pixels per frame, it should animate from 5 pixels per frame to zero.

Before, we calculated the approximate end index and animated it to that index. This caused the starting speed to mismatch with the swipe speed, which didn't feel right.

I also added two new features:

• Control the slider using a ref (currently exposing the slide, slideToIndex, and slideToPage methods)
• Add closest?: boolean argument to the slideToIndex function. Instead of sliding to the absolute index, it slides to the closest circular item index

This PR also fixes a problem when there are no pages; the slider still animates, and the slide shows empty tiles or no tiles at all. Sliding is completely disabled no when there are no pages.

Update

I've just pushed an update with some improvements:

• Interpolate the velocity and target position to get a less bumpy snapping (I want to push this further, but it feels already a lot better now)
• Use the actual index when cancelling a touch gesture (snap to closest)
• Use the actual index when swiping to account for current swipe distance

See https://66297348da698259008b816b--tile-slider-v2.netlify.app/

[royschut]

Great work, again better!
As discussed, still room for some improvement on mobile (iOS mostly?). I'm trying to fine-tune as well.

[sonarcloud]

Quality Gate passed

Issues
4 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[royschut]

#55

[langemike]

Nice work 🎉 Thanks for the examples!

[ChristiaanScheermeijer]

Superseded by #56