1.1.0 • Published 6 years ago

zarousel v1.1.0

Weekly downloads
3
License
MIT
Repository
github
Last release
6 years ago

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

PropertyTypeDefaultDescription
autoPlaybooleantruewhether autoplay carousel
autoPlayIntervalnumber3000(ms)interval time of autoplay
transitionDurationnumber300(ms)transition duration of carousel
showArrowbooleanfalsewhether show icon of arrow to control play of carousel
sizeArrowobject{width: 30, height: 30}size of icon of arrow
colorDotstring'#333'color of active dot
sizeDotobject{width: 10, height: 10}size of dot
swipeTofunction(index)--control zarousel by index of slide that is 0 based
goPrevfunction--swipe to previous slide of zarousel
goNextfunction--swipe to next slide of zarousel
onChangefunction(previousIndex, currentIndex)noopcallback when zarousel is changed
1.1.0

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago