1、安装
npm install swiper
2、引入js和css
// 引入此路径,才不会打包失败
import Swiper from ‘swiper/dist/js/swiper.js’
import ‘swiper/dist/css/swiper.min.css’
3、在组件挂载完毕的时候生成 Swiper 对象
componentDidMount(){
new Swiper('.swiper-container', {
loop: true, //循环
autoplay:{ //自动播放,注意:直接给autoplay:true的话,在点击之后不能再自动播放了
delay: 2500,
disableOnInteraction: false, //户操作swiper之后,是否禁止autoplay。默认为true:停止。
},
pagination: {
el: '.swiper-pagination',
clickable: true, // 允许点击跳转
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
}
4、render周期中渲染DOM元素
render() {
const bannerImg = this.props.bannerImg;
return (
{bannerImg.map((item,index)=>(
<div key={index} className=“swiper-slide” style={{backgroundImage:
url(${item})
}}>
))}
// swiper-button-warp是自己加的,为了让按钮居中对齐
)
}