bee-carousel
react bee-carousel component for tinper-bee
Carousel 可自定义手动点击滑动和左右滑动,可兼容移动端。基于swiper.js开发.继承swiper.js的所有方法和属性。
依赖
- react >= 15.3.0
- react-dom >= 15.3.0
- prop-types >= 15.6.0
使用方法
;; Component { const params = pagination: el: '.swiper-pagination' clickable: true spaceBetween: 30 return <Carousel ...params> <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> <div>Slide 4</div> <div>Slide 5</div> </Carousel> } ; ReactDOM;
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
containerClass | Carousel 容器 class name | String | swiper-container |
wrapperClass | Carousel 父元素 class name | String | swiper-wrapper |
slideClass | Carousel 单个元素 class name | String | swiper-slide |
prevButtonCustomizedClass | Carousel 前一个按钮 class name | String | '' |
nextButtonCustomizedClass | Carousel 下一个按钮 class name | String | '' |
paginationCustomizedClass | Carousel 页码 class name | String | '' |
shouldSwiperUpdate | 当元素发生变是否更新Carousel | Boolea | false |
rebuildOnUpdate | 当元素更新是否重新渲染Carousel | Boolean | false |
noSwiping | 根据条件是否禁用滑动 | Boolean | false |
activeSlideKey | 定义最初的激活态slide | String or Number | '' |
你也可以直接用swiper.js的原始参数 这里api/
开发调试
$ npm install -g bee-tools$ git clone https://github.com/tinper-bee/bee-carousel$ cd bee-carousel$ npm install$ npm run dev