Embla Carousel - select inner text

Question

I have a carousel built using Embla Carousel (embla-carousel-react).

The elements within the carousel contain an image and some text. The text is not selectable, but I would like it to be.

When I set draggable: false, I can select the text inside the carousel, but now I can no longer scroll the carousel to the next slide.

Is there a way I can have both - select and copy text with a mouse click and drag, and swipe to the next scroll with a more pronounced swipe or scroll gesture?

const EmblaCarousel = ({ children, nextScroll, recordCurrentSlide }) => {
  const { height } = useWindowDimensions()

  const [viewportRef, embla] = useEmblaCarousel({
    axis: "y",
    skipSnaps: false,
    startIndex: 0,
    draggable: true,
    dragFree: false,
    slidesToScroll: 1,
    loop: true,
  }, 
  [WheelGesturesPlugin()]);


  return (
    <div className="embla">
      <div className="embla__viewport" ref={viewportRef}>
        <div className="embla__container">
          {children}
        </div>
      </div>
      <style jsx>{`
      :global(.embla__container) {
        height: ${height};
      }
    `}</style>
    </div>
  );
};

Thanks!

Answer 1

I'm the creator of Embla Carousel and at the time of writing, what you want to achieve isn't possible. This is because Embla calls event.preventDefault() on touch and mouse events when the carousel has draggable: true set.

If you want to discuss this design choice and suggest changes, you may create a new discussion.