re-carousel
Minimal carousel component for React.
demo: https://amio.github.io/re-carousel/
Usage
import Carousel from 're-carousel'
then:
<Carousel > <div =>Frame 1</div> <div =>Frame 2</div> <div =>Frame 3</div></Carousel>
Attributes
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} (4000
ms by default) interval for auto sliding. -
duration
{Number} (300
ms 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):{return <Carousel loop auto widgets=IndicatorDots Buttons><div style=backgroundColor: 'tomato' height: '100%'>Frame 1</div><div style=backgroundColor: 'orange' height: '100%'>Frame 2</div><div style=backgroundColor: 'orchid' height: '100%'>Frame 3</div></Carousel>} -
frames
{Array of ReactElement} If you want to create frames programmatically, use this attribute:{const frames = propsframeArrayreturn <Carousel auto frames=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.
Contributes
npm run start # start local dev server npm run build # build lib npm run test # run tests