為什么我的Swiper在第一次使用React渲染時出現問題-有解無憂

我正在使用 React 并嘗試使用為什么我的 Swiper 在第一次使用 React 渲染時出現問題

但是，如果我按下下一步或后退按鈕，它會再次正常顯示。

為什么我的 Swiper 在第一次使用 React 渲染時出現問題

這是我的 Home 組件中的代碼：

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

這是我的主頁 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)- 我已經嘗試過了（它確實變大了當它處于活動狀態但在高度上沒有顯示更大時，我目前還沒有想出一些方法）

uj5u.com熱心網友回復：

您必須initialSlide將Swiper元素上的道具設定為中間幻燈片的索引。以便滑塊從那里開始。

同樣在這種情況下，您可以將centeredSlides道具設定true為活動幻燈片保持在中間。

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/394558.html

標籤：javascript css 反应

上一篇：我怎么能把陣列減半

下一篇：如何將地圖和鉗位功能結合在一起