美文网首页
react 轮播图

react 轮播图

作者: 温柔了十方春冬 | 来源:发表于2019-08-10 13:48 被阅读0次

1、yarn add react-swipe@5.1.1

2、import ReactSwipe from 'react-swipe';

3、<ReactSwipe></ReactSwipe>

4、 swipes的配置

let opt = {
auto: 1000,
autoPlay: true, 是否开启自动播放
currentPoint: 1, 初始位置,默认从0即第一个元素开始
distance: 620, // 每次移动的距离,卡片的真实宽度
}

render() {
  let opt = {
   auto: 1000,
 }

 return (
     <div className="card-swipe" >
          <ReactSwipe className="card-slide" swipeOptions={opt}>
               <div><img src="http://p0.meituan.net/movie/6309046b820ed1de6971d8fe19d3c3d892027.jpg" alt=""/>          </div>
             <div><img src="http://p0.meituan.net/movie/b06492e646a61c9bce9f08dc0f058c02151482.jpg" alt=""/></div>
             <div><img src="http://p0.meituan.net/movie/b64e58008e4883490cf60b466b75e595103754.jpg" alt=""/></div>

              this.state.card.length && this.state.card.map((item, index) => <div className="item" key={index}>   </div>
          </ReactSwipe>
      </div>
     )
 }

相关文章

网友评论

      本文标题:react 轮播图

      本文链接:https://www.haomeiwen.com/subject/llkrjctx.html