react-responsive-carousel，一款好用的react的banner插件

React Responsive Carousel是一个基于React.js响应式轮播，功能强大，轻巧且可完全自定义，用于基于React的APP
安装React Responsive Carousel

npm install --save react-responsive-carousel

使用react-responsive-carousel

import React from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';
import styles from './index.less'

const Banner = props => {

    const { data } = props

    function openUrl(url) {
        if (url) {
            window.open(url, '_blank')
        }
    }

    return (
        <div className={styles.banner}>
            <Carousel
                showArrows={true} //是否展示左右箭头
                showStatus={false} //是否展示右上角状态
                showIndicators={true} // 是否展示指示器
                infiniteLoop={true} //时候循环
                autoPlay={true} //是否自动播放
                stopOnHover={true} //  鼠标放上去是否停止播放
                showThumbs={false} // 是否展示轮播缩放展示图
                useKeyboardArrows={false} // 是否使用键盘左右按钮滑动
                swipeable={false} // 是否刷新
                dynamicHeight={false} //动态高度
                emulateTouch={false} // 是否拖拽滑动
            >
                {
                    data.map((item, index) => {
                        return <div
                            key={item.uuid}
                        >
                            {/* <div className="img" style={{ backgroundColor: index % 2 == 0 ? '#E8F3FF' : '#F6F6F6',  }}>{item.name}</div> */}
                            <div
                                onClick={() => openUrl(item.url)}
                                className="bannerImg" >
                                <img
                                    src={item.src}
                                    alt="" />
                            </div>
                            <p>{item.title}</p>
                        </div>
                    })
                }
            </Carousel>
        </div>
    );
}
export default Banner

另外还有swiper，这个还在摸索中，，，