/re-carousel

React carousel component, simplified. 2KB gzipped, zero dependency.

Primary LanguageJavaScriptMIT LicenseMIT

re-carousel npm

React carousel component, simplified. 2KB gzipped, zero dependency.

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)

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

  • indicator {ReactClass} Indicator could be various, so it's not builtin. You may create your own indicator according to this dots indicator, or just send it in:

    import Carousel from 're-carousel'
import IndicatorDots from 're-carousel/indicator-dots'

export default function carousel () {
  return <Carousel auto indicator={IndicatorDots}>
    <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>
}

Contributes

For testing locally:

npm run example:watch # compile codes lively
serve gh-pages # example page are compiled in gh-pages/ folder