Slick: 2-finger zoom in-out on mobile doesn't work on slick

[gmelikov]

If you try to zoom in-out by 2 fingers (at slick slideshow) on Android Chrome, nothing happens.

http://jsfiddle.net/simeydotme/fmo50w7n/ (works on template sjfiddle).

Steps to reproduce the problem

1. Open Chrome on Android
2. Load any page with Slick
3. Try to zoom in by 2 fingers on Slick slideshow
   

What is the expected behaviour?

The page zoomed

What is observed behaviour?

The page didn't zoom in.

More Details

• It happens on mobile phone, Chrome 52
• Which jQuery/Slick version are you using? - i think it's version-independent, tested it on Slick 1.5.9 and 1.6.0.
• Did this work before? I don't know, now it doesn't work.

Maybe i missed some settings for this feature?

Thanks!

[simeydotme]

I believe it's to do with intercepting the touches[] and preventing the default behaviour... you can try to prevent this by detecting (on touch start) if the e.originalEvent.changedTouches[] array has more than one entry, and disabling the carousel temporarily until a touchEnd event... this should allow pinch-zooming. (I think... I've done this before but with a ton more effort as I needed a custom-zoom feature which I implemented with Hammer.js)

[leggomuhgreggo]

@simeydotme nice!

[lukashillebrand]

Any solutions to this problem?

[nexxome]

@ #1188

Remove these lines in slick.scss:
-ms-touch-action: pan-y; touch-action: pan-y;

[shmdhussain]

removing the touch-action property may enable the zoom but the user cannot scroll and see the left and right most part of the image when it is zoomed.

[gempir]

@nexxome this does nothing for me. Is there something I'm overlooking here?

[Dkuran]

@gmelikov I don't know if you still need a solution for this, but what I did and works was changing the CSS in the class:
".slick-slider": { touchAction: "auto", } ,
I am using styled components, that explain syntax I am using here, in this way yo don't lose scroll or swipe.

Hope this helps somebody.

[NerdtureUs]

Do we have the ability to set these options at initialization?

I have a scenario where we have to sliders on page, one where we want to be able to pinch-zoom and the other where we don't. Being able to pass in the pan-x, pan-y, touch-action, etc. options and not having to maintain two different css files would be ideal.

[binarymonkey84]

@gmelikov I don't know if you still need a solution for this, but what I did and works was changing the CSS in the class:
".slick-slider": { touchAction: "auto", } ,
I am using styled components, that explain syntax I am using here, in this way yo don't lose scroll or swipe.

Hope this helps somebody.

This didn't work for me... is there an example you can share?