Minimal carousel component for React.
demo: https://amio.github.io/re-carousel/
import Carousel from 're-carousel'
then:
<Carousel auto>
<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>
All attributes are optional.
axis
{Enum} 'x'
or 'y'
('x'
by default)
loop
{Boolean} true
or false
(false
by default) toggle loop mode.
auto
{Boolean} true
or false
(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):
import Carousel from 're-carousel'
import IndicatorDots from './indicator-dots'
import Buttons from './buttons'
export default function carousel () {
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:
import Carousel from 're-carousel'
export default function carousel (props) {
const frames = props.frameArray.map((frame, i) => {
return <div>Frame {i}</div>
})
return <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.
npm run start # start local dev server
npm run build # build lib
npm run test # run tests