[Bug]: Changing axis direction breaks carousel about embla-carousel

[ancashoria]

Thanks, it must have been something with my home made isMobile hook.
I have migrated to breakpoints and everything works smooth.

Thank you so much and congrats on the 8.0 release

[davidjerleke]

I cant view that sandbox (404)

@smc13 sorry about that. I had to make the sandbox public. Try now!

[davidjerleke]

@smc13 seems like you're doing stuff in the wrong order. You have to change the CSS first, before calling reInit() so correct calculations can be made for the changed axis. Here's a working CodeSandbox.

Best,
David

[smc13]

@davidjerleke I cant view that sandbox (404) but that does make sense. I'll need to restructure my vue app logic to delay passing the updated options to the plugin since currently vue will do both in the same frame.

Thanks,
Sam

[smc13]

I've found in Vue I can update the watchers in the plugin to add { flush: 'post' } which causes the watchers to fire after any DOM updates in the parent component.

Not sure if it'll cause any timing issues though (eg: if slides and options are updated at the time time, possibly causing the watchers reInit and emblas native slide watcher to trigger at the same time)

[ancashoria]

@davidjerleke I'm trying to achieve the same thing in React. Shouldn't embla handle the reactivity by default?

  const axis = isMobile ? "x" : "y";
const [emblaMainRef, emblaMainApi] = useEmblaCarousel({
    axis,
  });

My isMobile hook returns the correct value asyncronously and useEmblaCarousel doesn't update when the axis changes

[davidjerleke]

@ancashoria did you pay attention to this? Answer to your question: Yes options are reactive.

[ancashoria]

I have and even tried to delay the reinit and when axis changes:

useEffect(() => {
    setTimeout(() => {
      emblaMainApi?.reInit({ axis });
      emblaThumbsApi?.reInit({ axis });
    }, 1000);
  }, [axis]);

[davidjerleke]

@ancashoria yes, but how about your CSS? Did you change it to align the slides vertically when the axis is y?