Flickering react swiper components on loading.

[naseef0]

swiperissue.mp4

<div className="swiper-slider">
    <Swiper
      // dir="rtl"
      slidesPerView={2.3}
      spaceBetween={16}
      breakpoints={{
        768: {
          slidesPerView: 4,
          spaceBetween: 24,
        },
        1024: {
          slidesPerView: 6,
          spaceBetween: 32,
        },
      }}
      navigation={{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }}
      modules={[Navigation]}
    >
      <SwiperSlide>
        <Link href=" ">
          <Card className="">
            <div className="card-image">
              <img src="/images/lenzspec/categories/ca-06.webp" alt="" />
            </div>
            <CardBody>
              <CardTitle>Refresh</CardTitle>
              <CardSubtitle>New collection</CardSubtitle>
            </CardBody>
          </Card>
        </Link>
      </SwiperSlide>
      <SwiperSlide>
        <Link href=" ">
          <Card className="">
            <div className="card-image">
              <img src="/images/lenzspec/categories/ca-02.webp" alt="" />
            </div>
            <CardBody>
              <CardTitle>Reading Sunglasses</CardTitle>
              <CardSubtitle>5 corrections</CardSubtitle>
            </CardBody>
          </Card>
        </Link>
      </SwiperSlide>
      <SwiperSlide>
        <Link href=" ">
          <Card className="">
            <div className="card-image">
              <img src="/images/lenzspec/categories/ca-03.webp" alt="" />
            </div>
            <CardBody>
              <CardTitle>Essential Sport</CardTitle>
              <CardSubtitle>New collection</CardSubtitle>
            </CardBody>
          </Card>
        </Link>
      </SwiperSlide>
      <div className="swiper-nav-buttons">
        <Button color="secondary swiper-button-prev">
          <IconChevronLeft className="icon" />
        </Button>
        <Button color="secondary swiper-button-next">
          <IconChevronRight className="icon" />
        </Button>
      </div>
    </Swiper>
</div>

Any solution for this?

[ramsaysewell]

Hey @naseef0,

Did you manage to get this working as expected?

Some things I would try to check off as fixes for this:

• are you setting a fixed width to your SwiperSlides?
• could setting breakpoints be causing the layout tot fluctuate as much as it's doing?
• are the images loading in bigger than they need to be and causing the layout shift?

Hope these help you out a bit!