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

【问题标题】：SwiperJS with react isn't showing next slide带有反应的 SwiperJS 没有显示下一张幻灯片
【发布时间】：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;
            }
        }
    }

【问题讨论】：

标签： javascript reactjs react-hooks swiper swiper.js

【解决方案1】：

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

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

【讨论】：