Minimal carousel component for React.
demo: https://amio.github.io/re-carousel/
then:
```javascript import Carousel from 're-carousel' import IndicatorDots from './indicator-dots' import Buttons from './buttons'
export default function carousel () {
```javascript import Carousel from 're-carousel'
export default function carousel (props) {
demo: https://amio.github.io/re-carousel/
Usage
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>
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,
```javascript 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:```javascript 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.Contributes
npm run start # start local dev server
npm run build # build lib
npm run test # run tests