Die React JS Swiper-Schleife kann Objekte nicht korrekt durchlaufen

Question

Mein Swiper funktioniert in React nicht. Ich habe mehrmals erfolglos versucht, das Problem zu beheben. Swiper ist bereits die neueste Version.

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

importiere {Swiper, SwiperSlide} aus „swiper/react“;
import „swiper/css“;
import „swiper/css/pagination“;

{Pagination} aus „swiper/modules“ importieren


const Testimonials = () =>
    zurückkehren (
        <section className="testimonial container section">
            <h2 className="section_title">Mein Kunde sagte</h2>
            <span className="section_subtitle">Empfehlungsschreiben</span>

            <Swiper className="testimonial_container"
            Schleife={true}
            grabCursor={true}
            spaceBetween={24}
            Paginierung={{
              anklickbar: wahr,
            }}
            Haltepunkte={{
              576: {
                slidesPerView: 2,
              },
              768: {
                slidesPerView: 2,
                spaceBetween: 48,
              },
            }}
            module={[Paginierung]}>
                {Data.map(({id,image,title,description})=>{
                    zurückkehren(
                        <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>
        </Abschnitt>
    );
};

Standardreferenzen exportieren;

Ich habe verschiedene Syntaxformen ausprobiert, ohne Erfolg. Ich möchte in der Lage sein, endlos durch meine Objekte zu scrollen, aber es bleibt immer bei der zweiten Folie hängen.

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>