[Help]: Disable mouse dragging while keeping touch dragging

[pepew-le-boss]

Summary

I apologize if this is mentioned in the documentation and I missed it, but is there an “official way” to disable mouse dragging while keeping touch dragging enabled?

Specifically, I want the carousel to be swiped using controls only (arrow or dot buttons) when using a mouse, but on mobile devices, I’d like to allow swiping using touch gestures or controls.

PS: I'm using the react version with shadcn

If applicable, which variants of Embla Carousel are relevant to this question?

• 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-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[sarussss]

Hi @pepew-le-boss,

You can use the watchDrag option:

<Carousel
  opts={{
    watchDrag: (emblaApi, event) => {
      // The event parameter here is a TouchEvent or MouseEvent
      return 'TouchEvent' in window && event instanceof TouchEvent;
    },
  }}
>
  ...
</Carousel>