[Feat]: Add robust pinch zoom support

[realwagyu]

Which variants of Embla Carousel are relevant to this feature request?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Feature description

Allow pinch zoom in carousel direction. E.g. if the carousel is horizontal, you can pinch zoom vertically and horizontally.

Additional Context

Touch pinch zoom works when pinching in the opposite axis of the carousel. E.g. if the carousel is horizontal, you can pinch zoom vertically, while pinching horizontally moves the carousel.
I've tried #645.

@kj's

keen-slider pull request works for me when used in embla-carousel here:

/*DragHandler.ts*/
	function move(evt: PointerEventType): void {
		if (
			window.TouchEvent &&
			evt instanceof TouchEvent &&
			evt.touches.length >= 2
		) {
			return;
		}
		...
	}

Works on

• Android Chromium 116
• Android Firefox 124
• Android Opera Mini 79

Someone please test Safari.

• Pull request: [Feat]: Add robust pinch zoom support #830

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues
• I agree to follow this project's Contributing Guidelines for feature requests

[davidjerleke]

@realwagyu closing this as resolved. This feature has been released in v8.0.3.

[meirroth]

@davidjerleke Hi, can you please explain or point me to an explanation of this pinch zoom is? I didn't understand from the description above why would you want to zoom on a carousel. Also, should I add touch-action: pinch-zoom; to my carousels?

[davidjerleke]

Hi, can you please explain or point me to an explanation of this pinch zoom is?

@meirroth sure. This is a pinch zoom:

I didn't understand from the description above why would you want to zoom on a carousel

Sometimes users might want to zoom in if there's an interesting image inside your slides or similar.

This fix simply makes the carousel behave better when zooming with a pinch move. Prior to this fix, the carousel would sometimes trigger unintentional scroll when pinch zooming. With this fix, the carousel stops scrolling as soon as it senses more than one finger on the touch screen - Enabling users to pinch zoom without triggering unintended scroll.

Also, should I add touch-action: pinch-zoom; to my carousels?

For horizontal carousels you should add this to your container:

.embla__container {
  touch-action: pan-y pinch-zoom;
}

For vertical carousels you should add this to your container:

.embla__container {
  touch-action: pan-x pinch-zoom;
}

[meirroth]

@davidjerleke Thank you for the clarification!! It makes sense now.
So adding pinch-zoom only if your slides support zooming in, otherwise no need to add it.

[davidjerleke]

@meirroth you should always set the pan-<axis> property. That's mandatory if you want the carousel to not scroll the page too when you're scrolling the carousel (which is very annoying UX). Including pinch-zoom is optional.

For horizontal carousels you should add this to your container:

.embla__container {
  touch-action: pan-y;
}

For vertical carousels you should add this to your container:

.embla__container {
  touch-action: pan-x;
}

[meirroth]

@davidjerleke That's what I meant. Thank you for clarifying!