search

kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.47k stars 5.89k forks source link

2-finger zoom in-out on mobile doesn't work on slick #2505

Open gmelikov opened 8 years ago

gmelikov commented 8 years ago

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

Maybe i missed some settings for this feature?

Thanks!

simeydotme commented 8 years ago

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 commented 8 years ago

@simeydotme nice!

lukashillebrand commented 7 years ago

Any solutions to this problem?

nexxome commented 7 years ago

@ #1188

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

shmdhussain commented 7 years ago

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 commented 5 years ago

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

Dkuran commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

@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?

sanjay-makwana-avidbrio commented 3 years ago

Does anyone have a solution?

rtpHarry commented 2 years ago

I found this snippet on another page which allows you to pinch and zoom, but for me it was enabling it on the whole site not just the slide:

  <style>
    .slick-slider {
    touch-action: auto !important;
    }
  </style>
sav4yk commented 2 years ago

Try use https://www.jqueryscript.net/zoom/jQuery-Plugin-For-Panning-Zooming-Any-Elements-panzoom.html with this carousel

KKKircheff commented 1 year ago

Thanks for the help from 2023 :) For me .slick-slider { touch-action: auto; } worked perfect. I implemented it as class modifier in the CSS file of the component that renders , as a separate style at end