React JS Swiper循環無法正確遍歷物件的問題

Question

我的Swiper在React中無法工作，我嘗試過多次修復，但是沒有成功解決。 Swiper已經是最新版本。

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">我的客戶說</h2>
            <span className="section_subtitle">推薦信</span>

            <Swiper className="testimonial_container"
            loop={true}
            grabCursor={true}
            spaceBetween={24}
            pagination={{
              clickable: true,
            }}
            breakpoints={{
              576: {
                slidesPerView: 2,
              },
              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;

我嘗試了不同的文法形式，但都沒有成功。我希望能夠無限滾動瀏覽我的對象，但它總是卡在第二張投影片上。

Answer 1

我發現你的程式碼有一些潛在問題：

• 你使用了loop屬性，但沒有將slidesPerView屬性設定為大於1的值。這意味著Swiper每次只會顯示一個幻燈片，並且無法循環播放。
• 你使用了breakpoints屬性，但沒有為576斷點設定slidesPerView屬性。這表示當視窗寬度小於576px時，Swiper每次只會顯示一個投影片。
• 你沒有使用autoplay屬性。這意味著Swiper不會自動滾動。 希望這些建議能解決問題。

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>