1.0.0 • Published 6 years ago
horse-tornado v1.0.0
Horse Tornado 🎠🌪️
React carousel with flexible API for adding content and custom buttons. https://stuartflanagan.github.com/horse-tornado
Installation
Via NPM
npm install horse-tornado --save
Via YARN
yarn install horse-tornado --save
Usage
Put your stuff inside the Horse Tornado Include and return the component in your own stateless function or class' render method.
include Carousel from 'horse-tornado';
...
return(
<Carousel>
<your-stuff>
...
</Carousel>
);Available Props
| Name | Type | Default | Allowed Values | Description | |
|---|---|---|---|---|---|
| page | integer | 0 | Positive integer | Page to set carousel to | |
| direction | string | horizontal | horizontal | vertical | Direction of carousel movement. |
| infinite | boolean | false | true | false | Infinite wrap around mode (Not yet avaialable) |
| groupBy | integer | 0 | Positive integer | Amount of slides to scroll. Default 0 scrolls the number of whole slides on a page. | |
| freeScroll | boolean | false | true | false | disables snapping to page. (Not yet avaialable) |
| panSensitivity | number | .2 | 0-1 | Percentage of the page panned before a new page... | |
| swipeSensitivity | number | .5 | 0-1 | Velocity at which a swipe is registered | |
| transitionDuration | string | .3s | CSS Transition Duration | CSS Transition Duration | |
| transitionEase | string | ease | CSS Transition Timing Function | CSS Transition Timing Function |
TODO
- Add button API
- Infinite mode
- Free scroll mode
- Support variable width slides
- Documentation
Contributing
- Fork the repository: https://github.com/stuartflanagan/horse-tornado.git
- Make changes
- Ensure linting and tests pass by running
npm run check - Submit a pull request.
License
MIT. Copyright (c) 2017 Stuart Flanagan