Closed kj closed 7 months ago
Thank you for your feature request @kj. Embla doesn’t prevent this but the examples all have touch-action
set to pan-y
for horizontal carousels and pan-x
for vertical ones. So the pinch zoom declaration is missing.
This might only be a matter of finding the touch-action
declaration in the CSS and adding pinch-zoom
to it like so:
.classname {
touch-action: pan-y pinch-zoom;
}
Let me know how it goes.
Best, David
Hi David, thanks for your quick response. I completely forgot to mention that I was testing on Firefox for Android. I just tried Chrome (actually Cromite) and it works there, even on the example page, which is great! I did actually try earlier with touch-action: pan-y pinch-zoom
on the examples page, but that didn't work for me in Firefox, so Firefox must behave differently somehow. I haven't looked at the Embla code too closely, but perhaps it just needs something like that extra check in my Keen-Slider PR to work in Firefox for Android too?
@kj I don’t know anything about Keen-Slider but you can add a callback to the Embla watchDrag option to customize the behavior and intercept the drag behavior. In your case, you need to do the following:
Best, David
Oh that does sound like it should work. I'll try it out tomorrow probably and report back.
@kj do you intend to pursue this?
Sorry @davidjerleke I didn't forget about this, I've just been a bit distracted. I tried with a minimal setup, basically this:
<script defer type="module">
import EmblaCarousel from './embla-carousel.esm.js';
EmblaCarousel(document.querySelector('.embla'));
</script>
And pinch zoom does work in Firefox for Android with touch-action: pan-y pinch-zoom
, or when touch-action
is unset. Only with touch-action: pan-y;
does it not work. So I'm not sure why it wasn't working for the website examples when I added pinch-zoom
, but maybe I missed something else. Either way, it's clearly working fine in the typical case without any workarounds (like the touch count I had to add with Keen-Slider), so I'll close this.
It's great to finally have a lightweight carousel that just does these things right!
Feature request is related to
Is your feature request related to an issue?
Pinch zoom isn't working for me on Android (at least in the examples on the website). I noticed in another issue https://github.com/davidjerleke/embla-carousel/issues/480#issuecomment-1567677811 someone commented that it is working under iOS, so this might only affect Android, although I can't be sure.
Describe the solution you'd like
I'd like to be able to use pinch zoom to zoom in to image details in a slider. I made a PR for Keen-Slider to get this working, although there's not much development activity over there so the PR hasn't gone anywhere.
The PR just checks whether there are two or more fingers touching the surface before dragging, and adds
pinch-zoom
totouch-action
.