React 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}
            }}
        >

原文由 Yuval Levy 发布，翻译遵循 CC BY-SA 4.0 许可协议

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]);

原文由 jony89 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

function App() {

  SwiperCore.use([Autoplay])

  ...
}

然后像这样使用：

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

原文由 Jonas 发布，翻译遵循 CC BY-SA 4.0 许可协议