Zarousel

A react component of carousel

Installation

npm i zarousel --save

Usage

import React from 'react';
import Zarousel from 'zarousel';
import 'zarousel/lib/zarousel.css';

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Zarousel
        className="container"
        autoPlay
        showArrow
      >
        <div className="slide">1</div>
        <div className="slide">2</div>
        <div className="slide">3</div>
        <div className="slide">4</div>
        <div className="slide">5</div>
        <div className="slide">6</div>
      </Zarousel>
    );
  }
}

Props

Property|Type|Default|Description ---|---|---|--- autoPlay|boolean|true|whether autoplay carousel autoPlayInterval|number|3000(ms)|interval time of autoplay transitionDuration|number|300(ms)|transition duration of carousel showArrow|boolean|false|whether show icon of arrow to control play of carousel sizeArrow|object|{width: 30, height: 30}|size of icon of arrow colorDot|string|'#333'|color of active dot sizeDot|object|{width: 10, height: 10}|size of dot swipeTo|function(index)|--|control zarousel by index of slide that is 0 based goPrev|function|--|swipe to previous slide of zarousel goNext|function|--|swipe to next slide of zarousel onChange|function(previousIndex, currentIndex)|noop|callback when zarousel is changed