Using the Embla Carousel, React version, 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]);

Using the Embla Carousel, React version, 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]);

• javascript
• reactjs
• embla-carousel

Share Improve this question Follow asked Apr 21, 2022 at 13:54 Ben MarshallBen Marshall 1,76422 gold badges1818 silver badges3535 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

From version 7 and up you can use the active option together with the breakpoints option to achieve this. Example from the Embla Carousel docs:

const options = {
  active: true,
  breakpoints: {
    '(min-width: 768px)': { active: false },
  },
}

Usage with React:

const [emblaRef, emblaApi] = useEmblaCarousel({
  active: true,
  breakpoints: {
    '(min-width: 768px)': { active: false },
  },
});

Pass null instead of the emblaRef when you want it to be inactive, like demonstrated here:

https://github./davidcetinkaya/embla-carousel/issues/99#issuement-688730519