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]);