Minimal carousel component for React

re-carousel

Minimal carousel component for React.

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.

• 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):

  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>
  }
  

  JavaScript

• 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>
  }
  

  JavaScript

Contributes

npm run start # start local dev server
npm run build # build lib
npm run test  # run tests

GitHub