Feature request: allow pinch to zoom in/out

[ruijdacd]

We should allow the user to be able to perform a pinch to zoom action on the slide.

In order to do this we could detect the amount of touches on the mousedown/touchstart and mousemove/touchmove and if that value is equal to 2 (indicating that the user is using 2 pointing devices, fingers in most cases), we can return early from the function and keep the browser behaviour.

If this doesn't clash with anything you are working on, or with future plans with the library, I would be happy to raise a PR for this

[ruijdacd]

I just figured out what was causing the pinch to zoom to be missing. I thought it was being prevented on the drag events, but apparently it's the touch-action CSS property that's disabling that behaviour.

I'll make that an option on my components, to conditionally enable/disable that behaviour.

Closing this issue, unless we want to make that an option that developers can disable based on use case

[pySilver]

@ruijdacd have you managed to implement pinch-zoom inside a slide?

[cabello]

Just noticed this while using keen-slider on mobile. Found a related issue: #237

It includes a reference to a 7 month PR.

What I ended up doing is, remove the import import 'keen-slider/keen-slider.min.css', copying the content of the file to my project:
https://github.com/rcbyr/keen-slider/blob/1c046b25981c8662085bd1d708af65996316c58c/src/keen-slider.scss

Added pinch-zoom to touch-action.

Zoom is no longer ignored.

The PR however has Javascript code that disables the sliding while zooming:

      if (
        window.TouchEvent &&
        e.raw instanceof TouchEvent &&
        e.raw.touches.length >= 2
      )
        return dragStop(e)

Which translates to, if you are doing a touch event with more than 1 finger, don't let it drag the slide.

Which seems essential for a great User Experience.

I think the CSS only approach, no update to library is a step in the right direction, hence sharing the approach here.