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

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>

Answer 3

在 NextJs 运行中，我使用以下代码：

import {  Pagination } from 'swiper';
import SwiperCore, { Autoplay } from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';

// ...
const HomeComponent = () => {
  SwiperCore.use([Autoplay]);
return (
    <Swiper
          className="home_slider"
          modules={[Pagination,Autoplay]}
          slidesPerView={1}
          onSlideChange={() => console.log('slide change')}
          onSwiper={(swiper) => console.log(swiper)}
          pagination={{ clickable: true }}
          autoplay
        >
          <SwiperSlide>
           <Image src={Image1}  alt='' />
          </SwiperSlide>
</Swiper>
)

Answer 4

https://swiperjs.com/demos#autoplay

从 swiper 导入模块并将其作为 props 传递给 Swiper 组件

import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination, Navigation } from "swiper";

   <Swiper
        spaceBetween={30}
        centeredSlides={true}
        autoplay={{
          delay: 2500,
          disableOnInteraction: false,
        }}
        pagination={{
          clickable: true,
        }}
        navigation={true}
        modules={[Autoplay, Pagination, Navigation]}
        className="mySwiper"
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>

React SwiperJs 自动播放不会使滑动器自动滑动

React SwiperJs autoplay not making the swiper to auto swipe

javascript

reactjs

next.js

swiperjs