[Bug]: Slides jump on load with loop: true

[RectoVersoDev]

Bug is related to

• embla-carousel (core package)

Embla Carousel version

• v7.1.0 / 8.0.0-rc14

Describe the bug

• When loop is set to true, the slides jump on load.

CodeSandbox

https://codesandbox.io/p/sandbox/inspiring-oskar-jqfp23

Steps to reproduce

1. Set loop option to true
2. Make slide size like 20%
3. Load/Reload the page
4. Slides jump

Expected behavior

No slides jump on load

Additional context

Astro website

[sarussss]

Hi @RectoVersoDev
As far as I can see, it's not a bug, it's just that if you turn on loop and align center, before loading and running js Embla it will display differently than after loading js Embla (Any slider library works the same). To solve this, there is You can convert align to start
or you can somehow make the embla js load and finish running sooner, but that's usually not good in terms of performance.

I'm sorry that English is not my main language, I hope you understand what I mean.

[davidjerleke]

Hi @RectoVersoDev,

Thank you for your bug report. As @sarussss already mentioned, this isn't a bug. SSR (Server Side Rendering) isn't a feature that Embla supports at the time of writing. It's possible to add SSR support that will solve most cases, but this would increase the bundle size. I can't give exact numbers but my guess is that the bundle size would increase significantly.

I'm planning on creating a poll for future features to vote under the discussions tab when I get the time to do so. I'll be sure to include the SSR feature there.

• This is a duplicate of [Feat]: SSR support #202.

Best,
David

[RectoVersoDev]

Hi @sarussss and @davidjerleke
Thank you for your answers !

You're right, when I set align to "start" there is no more jump. I understand what's happening now.

Sorry for the duplicate, I close the issue.
Have a great day ✌️

[davidjerleke]

@RectoVersoDev no worries. I'll be sure to add SSR to the vote for features list. Cheers!