P粉2427419212023-08-16 13:37:08
我發現你的程式碼有一些潛在問題:
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>