Repository files navigation

Minimal carousel component for React.

demo:https://amio.github.io/re-carousel/

import Carousel from 're-carousel'

then:

<Carouselauto><divstyle={{backgroundColor:'tomato',height:'100%'}}>Frame 1</div><divstyle={{backgroundColor:'orange',height:'100%'}}>Frame 2</div><divstyle={{backgroundColor:'orchid',height:'100%'}}>Frame 3</div></Carousel>

All attributes are optional.

• axis {Enum}'x' or'y' ('x' by default)

• loop {Boolean}true orfalse (false by default) toggle loop mode.

• auto {Boolean}true orfalse (false by default) toggle auto sliding.

• interval {Number} (4000ms by default) interval for auto sliding.

• duration {Number} (300ms by default) duration for animation.

• onTransitionEnd {Function({ prev: HTMLElement, current: HTMLElement, next: HTMLElement})} on frames transition end callback.

• widgets {Array of ReactClass} Indicator and switcher could be various,so it's not builtin. Here's some example custom widgets(dots indicator,prev/next buttons,keyboard navigation):

  importCarouselfrom're-carousel'importIndicatorDotsfrom'./indicator-dots'importButtonsfrom'./buttons'exportdefaultfunctioncarousel(){return<Carouselloopautowidgets={[IndicatorDots,Buttons]}><divstyle={{backgroundColor:'tomato',height:'100%'}}>Frame 1</div><divstyle={{backgroundColor:'orange',height:'100%'}}>Frame 2</div><divstyle={{backgroundColor:'orchid',height:'100%'}}>Frame 3</div></Carousel>}

• frames {Array of ReactElement} If you want to create frames programmatically,use this attribute:

  importCarouselfrom're-carousel'exportdefaultfunctioncarousel(props){constframes=props.frameArray.map((frame,i)=>{return<div>Frame{i}</div>})return<Carouselautoframes={frames}><span>These children element will be appended to Carousel,</span><span>as normal element other than "frame".</span></Carousel>}

• className {String} Custom class name.

npm run start# start local dev servernpm run build# build libnpm runtest# run tests

MIT ©Amio