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!