<p>我的Swiper在React中无法工作，我尝试过多次修复，但是没有成功解决。Swiper已经是最新版本。</p> <pre class="brush:php;toolbar:false;">import React from "react"; import "./testimonial.css"; import { Data } from "./Data"; import {Swiper, SwiperSlide} from "swiper/react"; import "swiper/css"; import "swiper/css/pagination"; import {Pagination} from "swiper/modules" const Testimonials = () =&gt; { return ( &lt;section className="testimonial container section"&gt; &lt;h2 className="section_title"&gt;我的客户说&lt;/h2&gt; &lt;span className="section_subtitle"&gt;推荐信&lt;/span&gt; &lt;Swiper className="testimonial_container" loop={true} grabCursor={true} spaceBetween={24} pagination={{ clickable: true, }} breakpoints={{ 576: { slidesPerView: 2, }, 768: { slidesPerView: 2, spaceBetween: 48, }, }} modules={[Pagination]}&gt; {Data.map(({id,image,title,description})=&gt;{ return( &lt;SwiperSlide className="testimonial_card" key={id}&gt; &lt;img src={image} alt="" className="testiomonial_img"/&gt; &lt;h3 className="testimonial_name"&gt;{title}&lt;/h3&gt; &lt;p className="testimonial_description"&gt;{description}&lt;/p&gt; &lt;/SwiperSlide&gt; ) })} &lt;/Swiper&gt; &lt;/section&gt; ); }; export default Testimonials;</pre> <p>我尝试了不同的语法形式，但都没有成功。我希望能够无限滚动浏览我的对象，但它总是卡在第二个幻灯片上。</p>

import React from "react";
import "./testimonial.css";
import { Data } from "./Data";

import {Swiper, SwiperSlide} from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";

import {Pagination} from "swiper/modules"


const Testimonials = () => {
    return (
        <section className="testimonial container section">
            <h2 className="section_title">My Clients Say</h2>
            <span className="section_subtitle">Testimonial</span>

            <Swiper className="testimonial_container"
            loop={true}
            slidesPerView={2}
            grabCursor={true}
            spaceBetween={24}
            pagination={{
              clickable: true,
            }}
            breakpoints={{
              576: {
                slidesPerView: 1,
              },
              768: {
                slidesPerView: 2,
                spaceBetween: 48,
              },
            }}
            modules={[Pagination]}>
                {Data.map(({id,image,title,description})=>{
                    return(
                        <SwiperSlide className="testimonial_card" key={id}>
                            <img src={image} alt="" className="testiomonial_img"/>

                            <h3 className="testimonial_name">{title}</h3>
                            <p className="testimonial_description">{description}</p>
                        </SwiperSlide>
                    )
                })}
            </Swiper>
        </section>
    );
};

export default Testimonials;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>