Slides flash one under the other before settling to show them next to each other

[kevinrenskers]

When the carousel initially loads on screen, you see all slides one under each other for a brief moment, before they quickly settle to be shown one next to the other.

I'm seeing the same behavior in Safari, Chrome and Firefox. It's easily visible with a very minimal example:

Screen.Recording.2023-07-07.at.14.54.37.mov

To run the example:

1. Checkout https://github.com/kevinrenskers/swiper-repro-2
2. npm i
3. npm run dev

But in a real-world website it's much worse:

Screen.Recording.2023-07-07.at.14.56.58.mov

In my opinion this seems like a bug. The slider should be shown with all the slides already in their correct position, but instead you get this "flash of unpositioned content". However my bug report was promptly closed without comment other than pointing to the discussions and Stackoverflow, which is disappointing. How is this not a bug?

[nolimits4web]

This means you initialise it too late, init it as soon as the DOM is ready, and there will no be any flickers, or hide it on your own and show when it is ready

[kevinrenskers]

I'm just using normal Svelte / SvelteKit components, see GitHub repo. Not sure how I would init it sooner?

[kevinrenskers]

In fact I am using the exact same methods as documented here: https://swiperjs.com/element#usage-with-svelte.

[TomasCarlson]

This is an issue we're seeing with Sveltekit too. A workaround to make it not as apparent is to set the swiper-container to flex, but that's not ideal

[pavelstianko]

Yes, we are struggling with the same problem on our websites in Sveltekit. I tried almost all ideas how to solve this, but nothing is working. My only solution now is to set width in css for each slide (that is changed afted init with real inline width).

[zygo1]

It might be late, but a solution about this problem is this one below:

<!--  Initially hidden -->
<div class="swiper w-full h-full opacity-0" ref={ref}>
  <div class="swiper-wrapper">
    {slides.map(...)}
  </div>
</div>


We added opacity-0 in the parent div, to make it hidden initially

And then there is an another property in the docs of swiper.js which let's you handle the initialization, so you remove the opacity-0 on init and your slider will be rendered when it is fully initialized. 


const element = ref.current;
const swiper = new Swiper(element, {
  modules: [Navigation, Autoplay],
  slidesPerView: 1,
  loop: true,
  // ...other options...
  on: {
    init: () => {
      // Reveal the slider once it's fully initialized
      element.classList.remove("opacity-0");
    }
  }
});