美文网首页
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