https://github.com/amio/re-carousel

Minimal carousel component for React.
https://github.com/amio/re-carousel

carousel carousel-component react react-carousel

Last synced: about 8 hours ago
JSON representation

Minimal carousel component for React.

• Host: GitHub
• URL: https://github.com/amio/re-carousel
• Owner: amio
• Created: 2016-03-10T07:17:28.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2023-02-27T20:56:06.000Z (almost 2 years ago)
• Last Synced: 2024-10-15T01:23:49.554Z (2 months ago)
• Topics: carousel, carousel-component, react, react-carousel
• Language: JavaScript
• Homepage: https://amio.github.io/re-carousel/
• Size: 4.33 MB
• Stars: 273
• Watchers: 9
• Forks: 50
• Open Issues: 34
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# re-carousel [![npm-version][npm-badge]][npm-link] [![size][size-src]][size-link]

Minimal carousel component for React.

demo: https://amio.github.io/re-carousel/

### Usage

`import Carousel from 're-carousel'`

then:

```jsx

  
Frame 1

  
Frame 2

  
Frame 3


```

### 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} (`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](src/indicator-dots.js),

  [prev/next buttons](src/buttons.js), [keyboard navigation](src/keyboard-navigator)):

  ```javascript

  import Carousel from 're-carousel'

  import IndicatorDots from './indicator-dots'

  import Buttons from './buttons'

  export default function carousel () {

    return 

      
Frame 1

      
Frame 2

      
Frame 3

    

  }

  ```

- `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 
Frame {i}

    })

    return 

      These children element will be appended to Carousel,

      as normal element other than "frame".

    

  }

  ```

- `className` {String} Custom class name.


### Contributes

```bash

npm run start # start local dev server

npm run build # build lib

npm run test  # run tests

```

## License

[MIT][mit] © [Amio][author]

[npm-badge]: https://badgen.net/npm/v/re-carousel

[npm-link]: https://www.npmjs.com/package/re-carousel

[size-src]: https://badgen.net/bundlephobia/minzip/re-carousel

[size-link]: https://bundlephobia.com/result?p=re-carousel

[mit]: http://opensource.org/licenses/MIT

[author]: http://github.com/amio