Mousewheel Swipe Too Fast

[pietrogregorini]

Hey there! I was checking the new demos page of the alpha version and I found some strange behavior of the mousewheel navigation on my MacBook Pro 16' using the trackpad. I know that Macs have a very sensible trackpad and sometimes sliders react strangely with them, but the original Swiper somehow can make it work in the right way. I attach a video just to let you see what happens: basically, it scrolls multiple images, while it should scroll just one. Guess is something related to sensitivity or to iOS-like scroll momentum.

https://user-images.githubusercontent.com/3169323/102547749-f183b480-40b9-11eb-92f4-da7990d260dc.mp4

[joe223]

Hi @pietrogregorini, really appreciate your feedback.

I have fixed it in the latest alpha version 😃 . You can check it through npm install tiny-swiper@latest or visit https://tiny-swiper.joe223.com/docs/demo/#mousewheel

[pietrogregorini]

Hi @joe223! My pleasure! Now it works great 👍 Just wondering... it would be possible also to invert the direction of the slides? Because on Mac it is common to have the "natural scrolling" which actually behaves in the opposite direction (looks more like a swipe on trackpad than an actual mousewheel).

[joe223]

@pietrogregorini It still be some kinda confusing to me 😂. Shall we use invert option to change the direction of the slides just likes the code show below? Or change the default direction of mousewheel.invert from false to true?

mousewheel: {
    invert: true,
    interval: 400
}

I'll be so glad to get your reply :)

[pietrogregorini]

@joe223 That's a good question 😉 Let's see...

If I check the SwiperJS demo page it behaves in the right way. So basically if I move my finger on the trackpad towards the left it moves to the next slide (backward if I move my finger on the right). This is the expected behavior in MacOS which emulates the "natural scrolling" inherited from iOS devices: https://swiperjs.com/demos/#mousewheel_control

In your demo I have to move my fingers in the opposite direction, so to me, the invert boolean should be set true by default, but I'm not just sure this is the same behavior for Windows and Linux users 🤔

[joe223]

@pietrogregorini Windows PC does the totally different interaction ( I don't have Linux laptop to test unfortunately).

I'll change the default behavior but still keeping invert option to false for compatibility. Besides, keeping the same api with SwiperJS will reduce the cost of usage that makes migration easier.

[pietrogregorini]

@joe223 Okay, there is just one thing to fix actually: the mousewheel by default should take only the direction of the carousel and not the other one. I explain it better: when I scroll down the demo page and I end up over the mousewheel demo, the main navigation is stuck inside the carousel and I can't scroll anymore with the trackpad or the mousewheel, I have to move the cursor outside the carousel to do so. This is not very good for usability: if the carousel is set with horizontal movement it shouldn't take also the vertical scroll to move the inner slides (unless required for specific projects).

I attach a video to explain better. Please notice that vertical scrolling of the page get stuck over the carousel.

https://user-images.githubusercontent.com/3169323/103425815-39740280-4bb5-11eb-85b3-efb982492f06.mp4

[joe223]

@joe223 Okay, there is just one thing to fix actually: the mousewheel by default should take only the direction of the carousel and not the other one. I explain it better: when I scroll down the demo page and I end up over the mousewheel demo, the main navigation is stuck inside the carousel and I can't scroll anymore with the trackpad or the mousewheel, I have to move the cursor outside the carousel to do so. This is not very good for usability: if the carousel is set with horizontal movement it shouldn't take also the vertical scroll to move the inner slides (unless required for specific projects).

I attach a video to explain better. Please notice that vertical scrolling of the page get stuck over the carousel.

example.mp4

@pietrogregorini It same with https://github.com/joe223/tiny-swiper/issues/49. I fixed this with latest verision 2.0.0 😁