beyond-slider

React 轮播组件

用法

require('beyond-slider/lib/index.css')
import Slider , {Item} from 'beyond-slider'
 
<Slider  height={500}>
    <Item key="0">
        <a href="http://www.baidu.com"> <img style={{width : '100%',height : '100%'}} src={require('images/c1.jpg')} /></a>
    </Item>
    <Item key="1">
        <a href="http://www.baidu.com"> <img style={{width : '100%',height : '100%'}} src={require('images/c2.jpg')} /></a>
    </Item>
    <Item key="2">
        <a href="http://www.baidu.com"> <img style={{width : '100%',height : '100%'}} src={require('images/c3.jpg')} /></a>
    </Item>
    <Item key="3">
        <a href="http://www.baidu.com"> <img style={{width : '100%',height : '100%'}} src={require('images/c4.jpg')} /></a>
    </Item>
</Slider>
 

API

Slider

名称	类型	默认值	说明
width	number/string	-	设置 Slider 宽度
height	number/string	400	设置 Slider 高度
interval	number/string	2	设置轮播的时间间隔,单位为秒
autoPlay	boolean	true	是否开启自动轮播
pauseOnAction	boolean	true	设置鼠标悬停时是否停止轮播
controlNav	boolean	true	显示 Slider 上的指示器
directionNav	boolean	true	显示 Slider 上的方向指示器
prev	Element/string	-	设置前指示器内容
next	Element/string	-	设置后指示器内容
extraClassName	string	-	增加一个 className, 用以覆盖原有样式