|
在react中无法自动轮播,无论是设置成对象格式的autoplay还是单独设置都不可以,我的朋友也是这种情况,还有其他的帖子也有这个问题,这么核心的功能为什么都实现不了呢???
import React from "react";
import Swiper from "swiper";
import "./swiper-bundle.min.css";
import "./swiper.css"
export default class Banner extends React.Component{
componentDidMount(){
new Swiper('.swiper-container',{
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
loop: true,
grabCursor: true,
});
}
render(){
return (
<div className="swiper-container">
<div className="swiper-wrapper">
<div className="swiper-slide">
<img src = "/img/banner1.jpg"/>
</div>
<div className="swiper-slide">
<img src = "/img/banner2.jpg"/>
</div>
<div className="swiper-slide">
<img src = "/img/banner3.jpg"/>
</div>
</div>
<div className="swiper-pagination"></div>
</div>
)
}
}
|
|