next.js React SwiperJs autoplay没有让swiper自动滑动

gmol1639 于 2023-08-04 发布在 React

关注(0)|答案(7)|浏览(169)

我在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>
    )
}

字符串
我也试过只在自动播放上使用boolean，但它也不起作用：

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

型

next.js

来源：https://stackoverflow.com/questions/63052586/react-swiperjs-autoplay-not-making-the-swiper-to-auto-swipe

7条答案

按热度按时间

jum4pzuy1#

第一个月
您似乎没有安装Autoplay组件。

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

字符串

赞(0）回复(0）举报 2023-08-04

5jdjgkvh2#

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>

字符串

赞(0）回复(0）举报 2023-08-04

erhoui1w3#

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

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

function App() {

  SwiperCore.use([Autoplay])

  ...
}

字符串
然后像这样使用：
<Swiper autoplay={{ delay: 3000 }} >...</Swiper>个

赞(0）回复(0）举报 2023-08-04

envsm3lx4#

在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>
)

字符串

赞(0）回复(0）举报 2023-08-04

xdnvmnnf5#

用于swiper版本8.3
import应该是这样的

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

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/autoplay";

字符串
你的swiper react组件，我的在autoplay={true}上不起作用，所以我添加了autoplay={{delay: 2000}，下面是我的整个swiper，它会帮助你

<Swiper
    modules={[Autoplay, Pagination]}
    pagination={{clickable: true}}
    slidesPerView={1}
    autoplay={{
          delay: 2000,
          pauseOnMouseEnter: true,
          disableOnInteraction: false
         }}
    loop
    className='swiper-container'
 >

型

赞(0）回复(0）举报 2023-08-04

4szc88ey6#

首先你需要导入

import { Autoplay, Pagination } from "swiper";

字符串
然后在滑动组件中

<Swiper
    slidesPerView={1}
    loop={true}
    pagination={{ clickable: true}}
    modules={[Pagination,Autoplay]}
    className={`mySwiper ${styledClasses}`}
    autoplay={{ delay: 2000}}
  > 
  {/* Slider here */}
  </Swiper

型
这将在reactjs中正确运行它

赞(0）回复(0）举报 2023-08-04

wkyowqbh7#

我只是有这个相同的错误，但在尝试了这里提供的不同技巧后，没有工作，所以我最后我尝试：
为了解决这个问题，我不得不直接在node_modules中找到的swiper文档中搜索Autoplay组件，如下所示。

import Autoplay from './../node_modules/swiper/modules/autoplay.mjs';

赞(0）回复(0）举报 2023-08-04