React中使用swiper6配置了自动播放参数,但是不能自动播放,请问是什么原因?代码如下:
import React from 'react';
import styles from './carousel.module.scss';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { EffectFade } from 'swiper';
import 'swiper/swiper-bundle.css';
import 'swiper/components/effect-fade/effect-fade.scss';
SwiperCore.use([EffectFade]);
const mockData = [
{
"title":"标题1",
"description":"描述1",
"slideMobileImg":"//m.360buyimg.com/mobilecms/s700x280_jfs/t1/147963/22/2503/175676/5f085783Eaa4d79c7/5e1bf6f0c87780ea.jpg!cr_1125x445_0_171!q70.jpg.dpg",
"showButton":true,
"buttonLink":"/doc"
},
{
"title":"标题1",
"description":"描述1",
"slideMobileImg":"//m.360buyimg.com/mobilecms/s700x280_jfs/t1/147963/22/2503/175676/5f085783Eaa4d79c7/5e1bf6f0c87780ea.jpg!cr_1125x445_0_171!q70.jpg.dpg",
"showButton":true,
"buttonLink":"/doc"
},
{
"title":"标题1",
"description":"描述1",
"slideMobileImg":"//m.360buyimg.com/mobilecms/s700x280_jfs/t1/147963/22/2503/175676/5f085783Eaa4d79c7/5e1bf6f0c87780ea.jpg!cr_1125x445_0_171!q70.jpg.dpg",
"showButton":true,
"buttonLink":"/doc"
}
]
export default class Carousel extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
activeIndex: 0
}
}
render() {
const list = mockData
return (
<Swiper effect="fade"
autoplay={{delay: 5000}}
pagination={{ clickable: true }}>
{
list.map((item, index) => {
return (
<SwiperSlide className='swiper-slide' key={item.slideMobileImg + index}>

<div className={styles['slide-text']}>
<p className={styles['slide-title']}>{item.title}</p>
<p className={styles['slide-desc']}>{item.description}</p>
</div>
</SwiperSlide>
)
})
}
</Swiper>
)
}
}
不是这样用的,就跟你用EffectFade一样需要注入的,你试试 应该有这个模块