import React from 'react';
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'
export default class Find extends React.Component{
constructor(props){
super(props);
this.state={
list:[1,2,3,6,6,8,9,9,42,5]
}
}
componentDidMount(){
var mySwiper = new Swiper ('.swiper-container', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
autoplay:{
delay:500, //500毫秒切换一次
}
})
}
//jsx
render(){
return (
<div>
<div className="swiper-container">
<div className="swiper-wrapper">
{
this.state.list.map((value,index)=>{
return(
<div key={index} className="swiper-slide">
{value}
</div>
)
})
}
</div>
<div className="swiper-pagination"></div>
</div>
</div>
)
}
}
react 轮播图
最新推荐文章于 2024-08-06 10:21:00 发布