一个 react 轮播组件
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>
);
}
}| 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 => | 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 |
npm install
npm starthttp://localhost:8001/examples/
online example: https://wengjq.github.io/GithubPage/rt-carousel/
npm test
npm run chrome-testnpm run coverageopen coverage/ dir
rt-carousel is released under the MIT license.