Why is my Swiper render buggy at the first time render using React

Question

I'm using React and trying to fetch some of my anime into the home banner using Swiper

I don't know why when I refresh my page, it'll only render at half of the swiper.

Here's how it display:

However, if I press the next or back button, it'll display normally again.

Here's my code in my Home Component:

import { useState, useEffect } from "react"
import ReactHlsPlayer from 'react-hls-player';
import './home.css'
import { supabase } from '../../supabaseClient'
import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Pagination,Navigation } from 'swiper';
import 'swiper/css'

SwiperCore.use([Pagination,Navigation]);
function Home(){
    useEffect(async ()=>{
        fetchAnime()
    }, [])
    const [animeDetail, setAnimeDetail] = useState([])
    async function fetchAnime() {
        const { data } = await supabase
            .from ('anime')
            .select ()
            setAnimeDetail(data)
    }

    return (
        <>
        <div className="spacer">
            &nbsp;
        </div>
        <div className="home-section">
            <h2>Home Page</h2>
            <Swiper 
            centeredSlides={true}
            slidesPerView={7}
            spaceBetween={10}
            loop={true}
            pagination={false} 
            navigation={true} className="mySwiper">
                {animeDetail.map((element, i)=> 
                    (
                    <SwiperSlide key = {i}><img src={element.anime_image}/></SwiperSlide>
                    )
                    )}

            </Swiper>
        </div>
        </>
    )

}
export default Home

And here's my Home CSS, sorry if it's a bit messy, I'm still trying it here and there, but I'm stuck.

  .swiper {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .swiper-wrapper{
    width: 100%
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 280px;
  }
  .swiper-slide img {
    display: block;
    box-sizing: border-box;
    border: none;
    max-height: 350px;
    min-height: 350px;
    -o-object-fit: cover;
       object-fit: cover;
    transition: all .3s ease;
    opacity: 0.5
  }

  .swiper-slide-active {
    transform: scale(1.2);
    z-index: 2
  }
  .swiper-slide-active img{
    transition: all .3 ease;
    opacity: 1
  }

And if someone figures it out, please help me a bit, I tried to whenever the item in the middle is in active, it'll pop out bigger, but I can't do it with transform: scale(number) - I have tried it (It does get bigger when it's active but it doesn't display bigger at the height, I haven't figured it out some ways at the moment)

Answer 1

you have to set the initialSlide prop on the Swiper element to an index of the slide in the middle. so that the slider starts from there.

Also in this case, you can set the centeredSlides prop to true as the active slide remains in the middle.