[Nuxt 3] Slides appear all at once without spacing on initial page load

[michaelprys]

I'm using a route transition and when I refresh the page, I can see how slides appear all at once without spacing, and after the page is fully loaded they fall into place and are displayed correctly. I suppose the slider may be initializing before all elements and styles are fully loaded and applied, leading to incorrect spacing and layout initially. I tried putting the logic in onMounted and using nextTick, but it freezes the carousel instead.

Reproduction of the issue:
https://stackblitz.com/edit/nuxt-starter-ubrvzh?file=app.vue

Steps to reproduce:

If you don't use a route transition, select throttling profile like 'Slow 4G' in the 'Network' section of the browser and reload the page to see the issue.

Same issue is posted on nuxt-keen-slider github page: modbender/nuxt-keen-slider#2

[BlaineCas]

It's because of the image, it's a link and not downloaded, the same or worse will happen with data taken from the backend. My fix was to put the carousel in a template and give it the data for the slides in the props. And v-if="someData" ... render carousel.

[oikalyptus]

We had the same problem. To fix this I added initial styling and removed it in keen-slider’s created hook.