rt-carousel
一个 react 轮播组件
Usage
import React from "react";
import Carousel from "rt-carousel";
class SimpleCarousel extends React.Component {
render() {
const settings = {
speed: 500,
autoplay: false,
dots: true,
arrows: true,
initialSlide: 0
};
return (
<Carousel {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Carousel>
);
}
}
API
props
name | type | default | description |
---|---|---|---|
initialSlide | Number | 0 | initialize the position of the carousel |
autoplay | Boolean | false | automatic carousel |
autoplaySpeed | Number | 3000 | automatic carousel interval |
speed | Number | 300 | animation speed |
appendDots | Function | dots =>
|
customize dot node |
dots | Boolean | true | open dots switch |
dotsClass | String | 'carousel-dots' | customize dot class |
customPaging | Function | i => {i + 1} | customize the children of each dot |
arrows | Boolean | true | open arrows switch |
nextArrow | Node | null | customize the node of nextArrow |
prevArrow | Node | null | customize the node of prevArrow |
pauseOnHover | Boolean | false | hover carousel pause |
unslick | Boolean | false | remove dots and arrows |
Development
npm install
npm start
Example
http://localhost:8001/examples/
online example: https://wengjq.github.io/GithubPage/rt-carousel/
Test Case
npm test
npm run chrome-test
Coverage
npm run coverage
open coverage/ dir
License
rt-carousel is released under the MIT license.