为什么我的 Swiper 在第一次使用 React 渲染时出现错误

Question

我正在使用 React 并尝试使用 Swiper 将我的一些动画提取到主页横幅中

我不知道为什么当我刷新我的页面时，它只会在滑动器的一半处呈现。

它的显示方式如下：

但是，如果我按下一步或返回按钮，它会再次正常显示。

这是我的主页组件中的代码：

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

这是我的 Home CSS，如果有点乱，抱歉，我还在到处尝试，但我卡住了。

  .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
  }

如果有人弄明白了，请帮帮我，只要中间的项目在active，它就会弹出更大，但我不能用transform: scale(number) -我试过了（激活时确实会变大，但在高度处不会显示更大，目前我还没有想出一些方法）

Answer 1

您必须将Swiper 元素上的initialSlide 属性设置为中间幻灯片的索引。让滑块从那里开始。

同样在这种情况下，您可以将centeredSlides 属性设置为true，因为活动幻灯片仍然在中间。