Focus and autoWidth not rendering correctly on mount / init

[VleugelsBas]

Hi there

I have this issue that when I want to center my slides with the autoWidth enabled, the init load of the slider is broken.
How can I solve this? After I go to the next slide, everything is fine. Here is my code:

const carousel = new Splide(item, {
type: 'loop',
height: '57rem',
autoWidth: true,
focus: 'center',
trimSpace: 'move',
easing: 'cubic-bezier(0.5, 0, 0, 1)',
updateOnMove: true,
pagination: false,
}).mount();

Result:

After clicking next slide:

Thanks!

[NaotoshiFujita]

Your code should work. Your local styles might affect the slider behavior.

Here is the working example with your settings:
https://codesandbox.io/s/autowidth-n0lc2

[NaotoshiFujita]

I guess each slide does not have explicit width, maybe?
https://splidejs.com/guides/auto-width/

[VleugelsBas]

Ow, so I didn't know about that. So there is absolutely no solution to make the slider go in auto-width mode by looking at the width of the image inside the __slide?

[NaotoshiFujita]

If you initialize the slider after images are loaded, you don't have to set width. Images have no dimension before being loaded.

You can use load event.
https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event