react-s-carousel
react-s-carousel实现了轮播功能,可以水平,垂直方向轮播与滑动
安装
npm install react-s-carousel or yarn add react-s-carousel
使用
; const windows = width: windowinnerWidth height: windowinnerHeight; { return <div> <div>上下滑动(item需指定高度)</div> <Carousel className=styleshcarousel horizontal=false indicator=false itemStyle=height: '180px' > <div className=stylesdemoIem >1</div> <div className=stylesdemoIem2 >2</div> <div className=stylesdemoIem3 >3</div> </Carousel> <div>左右滑动(item需指定宽度)</div> <Carousel className=styleshcarousel itemStyle=width: windowswidth> <div className=stylesdemoIem >1</div> <div className=stylesdemoIem2 >2</div> <div className=stylesdemoIem3 >3</div> </Carousel> </div> ; }
属性
属性 | 值类型 | 默认值 | 描述 |
---|---|---|---|
initItem | number | 0 | 初始化显示item的下标 |
horizontal | boolean | true | 是否水平滑动 |
loop | boolean | true | 是否循环滚动 |
auto | boolean | true | 是否自动滚动 |
autoplayTime | number | 3000 | 自动滚动间隔 |
disable | boolean | false | 是否可弹性拉动 |
indicator | boolean | true | 是否显示指示器 |
indicatorStyle | object | 无 | 指示器容器样式 |
indicatorCls | string | 无 | 指示器容器样式 |
indicatorDef | ReactNode | 无 | 指示器默认布局 |
indicatorActive | ReactNode | 无 | 指示器选中布局 |
bounce | boolean | false | 是否可弹性拉动 |
itemCls | string | 无 | carousel item的样式 |
itemStyle | object | 无 | carousel item的样式 |
refresh | func | 无 | 刷新carousel |
goToPage | func | 无 | 指定跳转到某一页 |