rmc-m-carousel

React Mobile Carousel Component (web and react-native)

Screenshots

Usage

npm install rmc-m-carousel

import Carousel from 'rmc-m-carousel';

<Carousel>
  <a target="_blank" rel="nofollow me noopener noreferrer" href="https://www.baidu.com">
    <img src="//d3kpm7yklociqe.cloudfront.net/ext/theme/20181207_banner_jpgwinter/banner.jpg" alt=""/>
  </a>
  <a target="_blank" rel="nofollow me noopener noreferrer" href="https://www.baidu.com">
    <img src="//d3kpm7yklociqe.cloudfront.net/ext/theme/20181210_banner_coat/banner.jpg" alt=""/>
  </a>
</Carousel>

see example

Development

npm i
npm start

Example

http://localhost:8000/examples/

install

API

属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | selectedIndex | 手动设置当前显示的索引 | number | 0 | | indicator | 是否显示指示器 | Boolean | true | | indicatorType | 指示器类型 | String ['dots', 'number'] | 'dots' | | autoplay | 是否自动切换 | Boolean | false | | autoplayInterval | 自动切换的时间间隔 | Number | 3000 | | dotStyle | 指示点样式 | Object | 无 | | dotActiveStyle | 激活的指示点样式 | Object | 无 | | dotClickSwipe | 点击指示点切换 | Object | true | | speed | 滑动灵敏度 | number | 500 | | beforeChange | 切换面板前的回调函数 | (from: number, to: number): void | 无 | | afterChange | 切换面板后的回调函数 | (current: number): void | 无 |

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rmc-m-carousel is released under the MIT license.