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

比眉伴天荒 2022-12-23 12:29 140阅读 0赞

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，这个还在摸索中，，，