javascript - React SwiperJs 自动播放不会使刷卡器自动刷卡

Question

我在 React 中使用这个 swiper： https ://swiperjs.com/react/

我试图让它“自动播放”，但它不会自动滑动。这是我尝试过的：

// https://swiperjs.com/get-started/
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
    SwiperStyle: {
        backgroundColor: '#f5f5f5',
        height: '58px',
        width: '100%',
    },
});

export default function TextInfoSlider(props) {
    const classes = useStyles();

    return (
        <div>

            <Swiper
                loop={true}
                autoplay={{
                    delay: 500,
                    disableOnInteraction: false
                }}
            >

                <SwiperSlide>Slide 1</SwiperSlide>
                <SwiperSlide>Slide 2</SwiperSlide>
                <SwiperSlide>Slide 3</SwiperSlide>
                <SwiperSlide>Slide 4</SwiperSlide>

            </Swiper>

            <style jsx global>{`
                    .swiper-container {
                        background-color: #f5f5f5;
                    }
           `}</style>
        </div>
    )
}

我也尝试在自动播放上使用布尔值，但它也不起作用：

        <Swiper
            loop={true}
            autoplay={true}
            }}
        >

Answer 1

By default Swiper React uses core version of Swiper (without any additional components). If you want to use Navitation, Pagination and other components, you have to install them first

您似乎没有安装Autoplay组件。

import SwiperCore, { Autoplay } from 'swiper';
...
SwiperCore.use([Autoplay]);

Answer 2

App.js在您喜欢的地方或任何地方配置刷卡器：

import 'swiper/swiper-bundle.css';
import SwiperCore, { Autoplay } from 'swiper';

function App() {

  SwiperCore.use([Autoplay])

  ...
}

然后像这样使用：

<Swiper autoplay={{ delay: 3000 }} >...</Swiper>