React SwiperJs自动播放不能让SwiperJs自动滑动

Question

我在React中使用了这个快捷键：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中或您喜欢的任何地方配置swiper：

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

function App() {

  SwiperCore.use([Autoplay])

  ...
}

然后像这样使用：

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