简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
La boucle React JS Swiper ne peut pas traverser correctement les objets
P粉835428659
P粉835428659 2023-08-15 22:44:32
0
1
506

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 ( 
 
Mon client a dit
 Lettre de recommandation  {Data.map(({id,image,titre,description})=>{ retour(   
{title}
 
{description}
  ) })}  
 ); } ; 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.

P粉835428659
P粉835428659

répondre à tous (1)
P粉242741921
P粉2427419212023-08-16 13:37:08 1 plancher

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 ( 
 
My Clients Say
 Testimonial  {Data.map(({id,image,title,description})=>{ return(   
{title}
 
{description}
  ) })}  
 ); }; export default Testimonials;
Comme+0
Ajouter une réponse
    Sujets populaires
    Plus>
    Articles populaires
    Tutoriels populaires
    Plus>
    Tutoriels associés
    Recommandations populaires
    Derniers cours
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！