wengjq / rt-carousel

react 轮播组件

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 => {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.