React JS Swiper 루프가 객체를 올바르게 탐색하지 못하는 문제

Question

내 Swiper가 React에서 작동하지 않습니다. 여러 번 문제를 해결하려고 시도했지만 성공하지 못했습니다. Swiper는 이미 최신 버전입니다.

"react"에서 React 가져오기;
import "./testimonial.css";
"./Data"에서 { 데이터 }를 가져옵니다.

"swiper/react"에서 {Swiper, SwiperSlide}를 가져옵니다.
"스위퍼/CSS" 가져오기;
import "swiper/css/페이지 매김";

"swiper/modules"에서 {Pagination} 가져오기


const 추천글 = () =>
    반품 (
        <section className="추천 컨테이너 섹션">
            <h2 className="section_title">내 고객이 말했습니다</h2>
            <span className="section_subtitle">추천서</span>

            <Swiper className="testimonial_container"
            루프={true}
            그랩커서={true}
            공간사이={24}
            페이지 매기기={{
              클릭 가능: true,
            }}
            중단점={{
              576: {
                SlidesPerView: 2,
              },
              768: {
                SlidesPerView: 2,
                공간사이: 48,
              },
            }}
            모듈={[페이지 매김]}>
                {Data.map(({id,image,title,description})=>{
                    반품(
                        <SwiperSlide className="testimonial_card" key={id}>
                            <img src={image} alt="" className="testiomonial_img"/>

                            <h3 className="testimonial_name">{제목}</h3>
                            <p className="testimonial_description">{설명}</p>
                        </스와이프슬라이드>
                    )
                })}
            </스와이프>
        </섹션>
    );
};

기본 사용후기 내보내기;

다른 구문 형식을 시도했지만 성공하지 못했습니다. 내 개체를 무한히 스크롤할 수 있기를 원하지만 항상 두 번째 슬라이드에서 멈춥니다.

Answer 1

귀하의 코드에 몇 가지 잠재적인 문제가 있는 것으로 보입니다.

• loop 속성을 사용했지만, SlidesPerView 속성을 1보다 큰 값으로 설정하지 않았습니다. 이는 Swiper가 한 번에 하나의 슬라이드만 표시하고 반복할 수 없음을 의미합니다.
• breakpoints 속성을 사용했지만 576 중단점에 대한 SlidesPerView 속성을 설정하지 않았습니다. 즉, 창 너비가 576px보다 작을 때 Swiper는 한 번에 하나의 슬라이드만 표시합니다.
• 자동재생 속성을 사용하고 있지 않습니다. 이는 Swiper가 자동으로 스크롤되지 않음을 의미합니다. 이러한 제안으로 문제가 해결되기를 바랍니다.

으아악 으아악