How to turn on/off the embla carousel by breakpoint in React?

[bmarshall511]

I'm trying to turn/on off the carousel based on breakpoint. So for mobile, it's on and for tablet up it's off. Here's what I tried that seems to work initially, but won't reinitialize. I'm guessing it's because destory was called so it can reInit and tried init, but no luck there either.

const emblaOptions = {};
  const [viewportRef, emblaApi] = useEmblaCarousel(emblaOptions);

  const handleEmblaInit = () => {
    if (window.innerWidth > 768) {
      emblaApi.destroy();
    } else {
      emblaApi.reInit(emblaOptions);
    }
  };

  useEffect(() => {
    if (emblaApi) {
      handleEmblaInit();
      window.addEventListener("resize", handleEmblaInit);
    }
  }, [emblaApi]);

[davidjerleke]

Hi @bmarshall511,

Thank you for your question. Pass null instead of the emblaRef when you want it to be inactive, like demonstrated here.

• Comment from Enable or disable on certain screen sizes #99

Best,
David

[bmarshall511]

Perfect, thanks!

[davidjerleke]

Hi @bmarshall511,

Just wanted to let you know that implementing this is now much easier using the active option together with the breakpoints option.

See the following example.

Cheers,
David