zarousel

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