re-carousel
Minimal carousel component for React
Last updated 3 months ago by amio .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install re-carousel 
SYNC missed versions from official npm registry.

re-carousel npm-version size

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 or false (false by default) toggle loop mode.

  • auto {Boolean} true or false (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):

    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

MIT © Amio

Current Tags

  • 2.4.0                                ...           latest (3 months ago)

25 Versions

  • 2.4.0                                ...           3 months ago
  • 2.3.1                                ...           10 months ago
  • 2.3.0                                ...           a year ago
  • 2.2.0                                ...           a year ago
  • 2.1.0                                ...           a year ago
  • 2.0.9                                ...           a year ago
  • 2.0.8                                ...           a year ago
  • 2.0.7                                ...           2 years ago
  • 2.0.6                                ...           2 years ago
  • 2.0.5                                ...           2 years ago
  • 2.0.4                                ...           2 years ago
  • 2.0.3                                ...           2 years ago
  • 2.0.2                                ...           2 years ago
  • 2.0.1                                ...           2 years ago
  • 1.2.7                                ...           3 years ago
  • 1.2.6                                ...           3 years ago
  • 1.2.5                                ...           4 years ago
  • 1.2.4                                ...           4 years ago
  • 1.2.3                                ...           4 years ago
  • 1.2.2                                ...           4 years ago
  • 1.2.1                                ...           4 years ago
  • 1.2.0                                ...           4 years ago
  • 1.1.0                                ...           4 years ago
  • 1.0.0                                ...           4 years ago
  • 0.1.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 14
This Month 36
Last Day 8
Last Week 1
Last Month 9
Dependencies (1)
Dev Dependencies (8)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |