带有反应的 SwiperJS 没有显示下一张幻灯片

Posted 2023-05-08

【中文标题】带有反应的 SwiperJS 没有显示下一张幻灯片

【英文标题】：SwiperJS with react isn't showing next slide

【发布时间】：2021-12-30 18:52:08

【问题描述】：

我目前正在将 SwiperJS 与我的 ReactApp 集成，并且一切正常，只是它没有显示下一张幻灯片。它将显示当前显示的幻灯片，但是当我滑过它时，它不会显示下一张幻灯片。 我正在使用他们在网站上的默认滑块和示例代码，但我似乎无法复制他们的演示。 https://swiperjs.com/react

Slide 1

Slide 2

在此示例中，您可以看到前 3 张幻灯片正在显示中，但是当我滑过它时，它会切断“Slide 3”的边缘并且不显示“Slide 4”。

JSX 代码

import "./aboutus.scss"
import  init  from "ityped"
import  useEffect,useRef  from "react"
import Swiper, SwiperSlide  from 'swiper/react/swiper-react.js'
import  Navigation, Pagination  from 'swiper';
import 'swiper/swiper.scss'; // core Swiper
import 'swiper/modules/navigation/navigation.scss'; // Navigation module
import 'swiper/modules/pagination/pagination.scss'; // Pagination module





export default function Aboutus() 

    const textRef = useRef();
    useEffect(()=> 
        init(textRef.current,  
            showCursor: false,
            typeSpeed: 150, 
            strings: [' Boston.', ' Los Angeles.' ]
         )
    , []);
    

    return (
        <div className="aboutus" id="aboutus">
            <div className="left">
                <div className="bio">
                        <div className="header">
                            <p >We are a K-POP Cover Dance Team in...</p>
                            <span ref=textRef className="textref"> </span>
                        </div>
                </div>
            </div>
            <div className="right">
                <div>
                    <Swiper
                        className="swiper-wrapper"
                        spaceBetween=1
                        slidesPerView=3
                        onSlideChange=() => console.log('slide change')
                        onSwiper=(swiper) => console.log(swiper)
                    >
                        <SwiperSlide className="swiper-slide">Slide 1</SwiperSlide>
                        <SwiperSlide className="swiper-slide">Slide 2</SwiperSlide>
                        <SwiperSlide className="swiper-slide">Slide 3</SwiperSlide>
                        <SwiperSlide className="swiper-slide">Slide 4</SwiperSlide>
                    </Swiper>
                </div>
            </div>     
        </div>
    )

SCSS 代码

    .right
        flex: 0.5;
        border: solid red;
        height: 90%;
        background-color: aqua;
        display: flex;
        justify-content: center;
        align-items: center;

        .swiper-wrapper
            // width: 100%;
            // height: 100%;
            // overflow: hidden;
            // border: solid green;
            
            .swiper-slide
                border: solid purple;
                // width: 100px;
                height: 300px;
            
        
    

【参考方案1】：

我发现了这个问题。在我的“index.html”文件中，我的“”元素中有一个“溢出-x：隐藏”，导致幻灯片被切断。我删除了它，所有的轮播都在工作！

希望这个解决方案也能帮助解决这个问题的其他人！