Gelung Swiper React JS tidak boleh melintasi objek dengan betul

Question

Swiper saya tidak berfungsi dalam React, saya telah cuba membetulkannya beberapa kali tetapi tidak berjaya. Swiper sudah pun versi terkini.

import React daripada "react";
import "./testimonial.css";
import { Data } daripada "./Data";

import {Swiper, SwiperSlide} daripada "swiper/react";
import "swiper/css";
import "swiper/css/penomboran";

import {Pagination} daripada "swiper/modules"


const Testimoni = () =>
    kembali (
        <section className="bahagian bekas testimoni">
            <h2 className="section_title">Pelanggan saya berkata</h2>
            <span className="section_subtitle">Surat Pengesyoran</span>

            <Swiper className="testimonial_container"
            gelung={benar}
            grabCursor={true}
            spaceBetween={24}
            penomboran = {{
              boleh diklik: benar,
            }}
            titik putus={{
              576: {
                slidesPerView: 2,
              },
              768: {
                slidesPerView: 2,
                ruangAntara: 48,
              },
            }}
            modules={[Penomboran]}>
                {Data.map(({id,imej,tajuk,huraian})=>{
                    kembali(
                        <SwiperSlide className="testimonial_card" key={id}>
                            <img src={image} alt="" className="testimonial_img"/>

                            <h3 className="testimonial_name">{title}</h3>
                            <p className="testimonial_description">{description}</p>
                        </SwiperSlide>
                    )
                })}
            </Swiper>
        </section>
    );
};

eksport Testimoni lalai;

Saya mencuba bentuk sintaks yang berbeza tetapi tidak berjaya. Saya mahu dapat menatal tanpa terhingga melalui objek saya, tetapi ia sentiasa tersekat pada slaid kedua.

Answer 1

Saya melihat beberapa isu yang berpotensi dengan kod anda:

• Anda menggunakan atribut gelung, tetapi tidak menetapkan atribut slidesPerView kepada nilai yang lebih besar daripada 1. Ini bermakna Swiper hanya akan memaparkan satu slaid pada satu masa dan tidak boleh gelung.
• Anda menggunakan atribut titik putus, tetapi tidak menetapkan atribut slidesPerView untuk titik putus 576. Ini bermakna apabila lebar tetingkap kurang daripada 576px, Swiper hanya akan memaparkan satu slaid pada satu masa.
• Anda tidak menggunakan atribut automain. Ini bermakna Swiper tidak akan menatal secara automatik. Harap cadangan ini dapat menyelesaikan masalah.

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>