首頁  >  問答  >  主體

React JS Swiper循環無法正確遍歷物件的問題

<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 = () => { return ( <section className="testimonial container section"> <h2 className="section_title">我的客戶說</h2> <span className="section_subtitle">推薦信</span> <Swiper className="testimonial_container" loop={true} grabCursor={true} spaceBetween={24} pagination={{ clickable: true, }} breakpoints={{ 576: { slidesPerView: 2, }, 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;</pre> <p>我嘗試了不同的文法形式,但都沒有成功。我希望能夠無限滾動瀏覽我的對象,但它總是卡在第二張投影片上。 </p>
P粉835428659P粉835428659452 天前580

全部回覆(1)我來回復

  • P粉242741921

    P粉2427419212023-08-16 13:37:08

    我發現你的程式碼有一些潛在問題:

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

    回覆
    0
  • 取消回覆