我在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}
}}
>
型
7条答案
按热度按时间jum4pzuy1#
第一个月
您似乎没有安装
Autoplay
组件。字符串
5jdjgkvh2#
https://swiperjs.com/demos#autoplay
从Swiper导入模块并将其作为props传递给Swiper组件
字符串
erhoui1w3#
在
App.js
或任何你喜欢的地方配置swiper:字符串
然后像这样使用:
<Swiper autoplay={{ delay: 3000 }} >...</Swiper>
个envsm3lx4#
在NextJs中运行以下代码:
字符串
xdnvmnnf5#
用于swiper版本8.3
import应该是这样的
字符串
你的swiper react组件,我的在
autoplay={true}
上不起作用,所以我添加了autoplay={{delay: 2000}
,下面是我的整个swiper,它会帮助你型
4szc88ey6#
首先你需要导入
字符串
然后在滑动组件中
型
这将在reactjs中正确运行它
wkyowqbh7#
我只是有这个相同的错误,但在尝试了这里提供的不同技巧后,没有工作,所以我最后我尝试:
为了解决这个问题,我不得不直接在node_modules中找到的swiper文档中搜索Autoplay组件,如下所示。
import Autoplay from './../node_modules/swiper/modules/autoplay.mjs';