React JS Swiper ループがオブジェクトを正しく走査できない

Question

Swiper が React で動作しません。修正を何度も試みましたが成功しませんでした。 Swiper はすでに最新バージョンです。

React を "react" からインポートします。
インポート "./testimonial.css";
import { Data } from "./Data";

「swiper/react」から {Swiper, SwiperSlide} をインポートします。
「スワイパー/CSS」をインポートします。
「スワイパー/CSS/ページネーション」をインポートします。

「swiper/modules」から {Pagination} をインポートします


const お客様の声 = () => {
    戻る （
        <section className="証言コンテナセクション">
            <h2 className="section_title">クライアントはこう言いました</h2>
            <span className="section_subtitle">推薦状</span>

            <スワイパークラス名="testimonial_container"
            ループ={true}
            grabCursor={true}
            spaceBetween={24}
            ページネーション={{
              クリック可能: true、
            }}
            ブレークポイント={{
              576: {
                ビューあたりのスライド数: 2、
              }、
              768: {
                ビューあたりのスライド数: 2、
                間隔: 48、
              }、
            }}
            modules={[ページネーション]}>
                {Data.map(({id,image,title,description})=>{
                    戻る（
                        <SwiperSlide className="testimonial_card" key={id}>
                            <img src={image} alt="" className="testiomonial_img"/>

                            <h3 className="証言名">{タイトル}</h3>
                            <p className="testimonial_description">{説明}</p>
                        </SwiperSlide>
                    ）
                })}
            </スワイパー>
        </セクション>
    );
};

デフォルトのお客様の声をエクスポート;

さまざまな構文形式を試しましたが、成功しませんでした。オブジェクトを無限にスクロールできるようにしたいのですが、常に 2 番目のスライドでスタックしてしまいます。

Answer 1

コードに潜在的な問題がいくつか見つかりました:

• loop 属性を使用しましたが、slidesPerView 属性を 1 より大きい値に設定しませんでした。つまり、Swiper は一度に 1 つのスライドのみを表示し、ループすることはできません。
• breakpoints 属性を使用しましたが、576 ブレークポイントの slidesPerView 属性を設定しませんでした。これは、ウィンドウの幅が 576 ピクセル未満の場合、Swiper は一度に 1 つのスライドのみを表示することを意味します。
• autoplay 属性を使用していません。これは、Swiper が自動的にスクロールしないことを意味します。 これらの提案が問題を解決することを願っています。

リーリー リーリー