La boucle React JS Swiper ne peut pas traverser correctement les objets

Question

Mon Swiper ne fonctionne pas dans React, j'ai essayé de le réparer plusieurs fois sans succès. Swiper est déjà la dernière version.

importer React depuis "react" ;
importer "./testimonial.css" ;
importer { Data } depuis "./Data" ;

importer {Swiper, SwiperSlide} depuis "swiper/react" ;
importer "swiper/css" ;
importer "swiper/css/pagination" ;

importer {Pagination} depuis "swiper/modules"


const Témoignages = () =>
    retour (
        <section className="section conteneur de témoignages">
            <h2 className="section_title">Mon client a dit</h2>
            <span className="section_subtitle">Lettre de recommandation</span>

            <Swiper className="testimonial_container"
            boucle={vrai}
            grabCursor={true}
            espaceEntre={24}
            pagination={{
              cliquable : vrai,
            }}
            points d'arrêt={{
              576 : {
                slidesParView : 2,
              },
              768 : {
                slidesParView : 2,
                espaceEntre: 48,
              },
            }}
            modules={[Pagination]}>
                {Data.map(({id,image,titre,description})=>{
                    retour(
                        <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>
    );
} ;

exporter les témoignages par défaut ;

J'ai essayé différentes formes de syntaxe sans succès. Je veux pouvoir faire défiler mes objets à l'infini, mais cela reste toujours bloqué sur la deuxième diapositive.

Answer 1

Je vois des problèmes potentiels avec votre code :

• Vous avez utilisé l'attribut loop, mais n'avez pas défini l'attribut slidesPerView sur une valeur supérieure à 1. Cela signifie que Swiper n'affichera qu'une seule diapositive à la fois et ne pourra pas effectuer de boucle.
• Vous avez utilisé l'attribut breakpoints, mais n'avez pas défini l'attribut slidesPerView pour le point d'arrêt 576. Cela signifie que lorsque la largeur de la fenêtre est inférieure à 576 pixels, Swiper n'affichera qu'une seule diapositive à la fois.
• Vous n'utilisez pas l'attribut de lecture automatique. Cela signifie que Swiper ne défilera pas automatiquement. J'espère que ces suggestions résoudront le problème.

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>