embla-carousel: Options object doesn't work after migration

Nice to see a rtl implementation of Embla Carousel 👍. Thank you for sharing the link.

Try updating to the latest version and run embla.reInit() when removing display: none and the issue should go away. Let me know how it goes.

Best, David

SOLUTION

I found the problem! It’s because of i18n, which uses react suspense. 😃 I think I can fix it on my own now!

@damian-balas, I just realized something. If you want the loop effect to work with 4 slides when each slide is 1/3 wide, you have to use the following css:

.slide {
  flex: 0 0 33.33333%;
}

/* ...instead of */

.slide {
  flex: 0 0 33.33%;
}

This is because the carousel viewport is 100%, and 33.33% x 3 slides = 99.99%, which is why Embla falls back to loop false. So if you use 33.33333% x 3 slides = 100% because the browser will round it to 100%. Alternatively, you can use the css calc function to divide 100% / 3.

Let me know if it helps!

Best, David

Ok, it works! Thanks for your time! I appreciate it.

You can put this information in the docs - “Might not work with react suspense”.

Nice digging @damian-balas 😃! Let me know how it goes. I hope that this will solve it so you can enjoy the power of Embla Carousel.

You’re right, my bad! I didn’t see it 😃

It would be nice if you could give a note about this in the docs.

It’s actually stated in the docs . Take a look here:

Unfortunately, I can’t see anything helpful from the screenshot .

It would be nice if you could give a note about this in the docs.

It’s actually stated in the docs 🙂. Take a look here:

Unfortunately, I can’t see anything helpful from the screenshot 😕.

I can drag it, but it doesn’t loop. As you can see in the first screenshot - there are blank rectangles. I can’t drag it further. I found out that when you have only 4 slides and try to display 3 at the same time (width: 33.33% / flex: 0 0 33.33%) EmblaCarousel breaks. If I add more slides EmblaCarousel starts working again. I guess there are some issues with loop functionality when there are only few slides.

This is expected behavior when you don’t provide enough slides with enough width for the loop effect to work. There has to be enough slides to cover the gap needed when flipping slide positions, otherwise the carousel would flicker when looping.

@damian-balas seems like my guess wasn’t correct.

The fallback to loop: false when slides aren’t enough to make the loop effect works for the react version as well. If I use 4 slides with flex: 0 0 33.33% like you mentioned here it still works as expected. Please take a look at this CodeSandbox.

I think you should try to toggle components on and off to see if you can find what’s causing this. If it suddenly starts working when you’ve deactivated a component you can narrow it down. I would start with framer-motion and its page transitions. Because without access to your repo it’s hard to debug further when I don’t have the whole picture.

Let me know if you find anything.

Kindly, David

Awesome! I really want to use this package, because it’s the smoothest one 😃

Thanks for digging further and narrowing it down @damian-balas!

I think I know why this is happening now. I’m guessing that only the React version of Embla suffers from this. When slides aren’t enough to loop Embla will pick that up and automatically fall back to loop false by re-initializing itself. React seems to “react” when this happens and re-renders Embla, causing and infinite call stack.

I will look into this and get back to you when I’ve done that.

Kindly, David

MORE INFO

I found out that when you have only 4 slides and try to display 3 at the same time (width: 33.33% / flex: 0 0 33.33%) EmblaCarousel breaks. If I add more slides EmblaCarousel starts working again. I guess there are some issues with loop functionality when there are only few slides.

Ok, I’ll try my best 😃

Hi Damian (@damian-balas),

Thank you for your question. I’m not sure why you get this error because I can’t reproduce it. I just created a CodeSandbox with the same options and it’s working just fine.

You haven’t provided any of your code so please take a moment to reproduce the error by forking the CodeSandbox above. Alternatively, you can provide your code and the contents of your package.json file so I can debug this further.

Kindly, David