React JS Swiper循环无法正确遍历对象的问题
P粉835428659
P粉835428659 2023-08-15 22:44:32
[CSS3讨论组]
<p>我的Swiper在React中无法工作,我尝试过多次修复,但是没有成功解决。Swiper已经是最新版本。</p> <pre class="brush:php;toolbar:false;">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 = () =&gt; { return ( &lt;section className="testimonial container section"&gt; &lt;h2 className="section_title"&gt;我的客户说&lt;/h2&gt; &lt;span className="section_subtitle"&gt;推荐信&lt;/span&gt; &lt;Swiper className="testimonial_container" loop={true} grabCursor={true} spaceBetween={24} pagination={{ clickable: true, }} breakpoints={{ 576: { slidesPerView: 2, }, 768: { slidesPerView: 2, spaceBetween: 48, }, }} modules={[Pagination]}&gt; {Data.map(({id,image,title,description})=&gt;{ return( &lt;SwiperSlide className="testimonial_card" key={id}&gt; &lt;img src={image} alt="" className="testiomonial_img"/&gt; &lt;h3 className="testimonial_name"&gt;{title}&lt;/h3&gt; &lt;p className="testimonial_description"&gt;{description}&lt;/p&gt; &lt;/SwiperSlide&gt; ) })} &lt;/Swiper&gt; &lt;/section&gt; ); }; export default Testimonials;</pre> <p>我尝试了不同的语法形式,但都没有成功。我希望能够无限滚动浏览我的对象,但它总是卡在第二个幻灯片上。</p>
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 (
        <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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号