zarousel

1.1.0 • Public • Published

Zarousel

NPM

Build Status

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

Readme

Keywords

Package Sidebar

Install

npm i zarousel

Weekly Downloads

4

Version

1.1.0

License

MIT

Unpacked Size

18.1 kB

Total Files

5

Last publish

Collaborators

  • zhiqiangzhong