React JS Swiper循环无法正确遍历对象的问题
P粉835428659
P粉835428659 2023-08-15 22:44:32
0
1
521

我的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 ( 

我的客户说

推荐信 {Data.map(({id,image,title,description})=>{ return(

{title}

{description}

) })}
); }; export default Testimonials;

我尝试了不同的语法形式,但都没有成功。我希望能够无限滚动浏览我的对象,但它总是卡在第二个幻灯片上。

P粉835428659
P粉835428659

全部回复 (1)
P粉242741921

我发现你的代码存在一些潜在问题:

  • 你使用了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 ( 

My Clients Say

Testimonial {Data.map(({id,image,title,description})=>{ return(

{title}

{description}

) })}
); }; export default Testimonials;
 
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责声明 Sitemap
    PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!