Loading one slide, then the others

[thefubon]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/sandbox/p3ngmy?file=/src/App.jsx

Bug description

Please tell me why first appears the full length of one banner, then all the others. How to get rid of this effect?

"next": "13.4.7",
"swiper": "^9.4.1",

"use client"

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";

// import required modules
import { Pagination } from "swiper";

export default function App() {
  return (
    <>
      <Swiper
        slidesPerView={'auto'}
        centeredSlides={true}
        spaceBetween={10}
        loop={true}
        pagination={{
          clickable: true,
        }}
        breakpoints={{
          "@0.00": {
            slidesPerView: 1,
            spaceBetween: 10,
          },
          "@0.75": {
            slidesPerView: 2,
            spaceBetween: 20,
          },
          "@1.00": {
            slidesPerView: 3,
            spaceBetween: 40,
          },
          "@1.50": {
            slidesPerView: 3,
            spaceBetween: 50,
          },
        }}
        modules={[Pagination]}
        className="mySwiper"
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>
    </>
  );
}

2023-06-26.09.58.16.mov

Expected Behavior

No response

Actual Behavior

No response

Swiper version

9.4.1

Platform/Target and Browser Versions

13.4

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[AS-Alandr]

In the slider style file, the slide width is initially set to :100%
The slider initialization script is loaded after the style file. Therefore, the first slide flashes to its full width.

Set the slider to opacity: 0. But add a script to delay changing the opacity to 1. This way the glitch will occur in hidden mode.

<script> setTimeout(function(){ document.getElementById('swiper').style.opacity = 1; }, 200); </script>

[DevJaco]

Are there any other fixes with regards to Swiper React when dealing with dynamic Slides. I've got it working in another project with no issues but now have the bug when copying exactly.