2.4.0 • Published 5 years ago
re-carousel v2.4.0
re-carousel
Minimal carousel component for React.
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, 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.
Contributes
npm run start # start local dev server
npm run build # build lib
npm run test # run tests
License
2.4.0
5 years ago
2.3.1
5 years ago
2.3.0
6 years ago
2.2.0
6 years ago
2.1.0
6 years ago
2.0.9
6 years ago
2.0.8
6 years ago
2.0.7
6 years ago
2.0.6
6 years ago
2.0.5
6 years ago
2.0.4
7 years ago
2.0.3
7 years ago
2.0.2
7 years ago
2.0.1
7 years ago
2.0.0
7 years ago
1.2.7
7 years ago
1.2.6
8 years ago
1.2.5
8 years ago
1.2.4
8 years ago
1.2.3
8 years ago
1.2.2
8 years ago
1.2.1
8 years ago
1.2.0
8 years ago
1.1.0
8 years ago
1.0.0
8 years ago
0.1.0
8 years ago