1.2.0 • Published 7 years ago
react-apple-carousel v1.2.0
react-apple-carousel
Installing
$ npm install react-apple-carousel --saveDemos
Usage
<AppleCarousel
renderSlides={[
({ activeItemIndex, index }) => <Slide1 isActive={index === activeItemIndex} />,
({ slide }) => <Slide2 animationValue={slide} />,
() => <Slide3 />,
() => <Slide4 />,
]}
/>| Property | Type | Default | Description |
|---|---|---|---|
| renderSlides* | arrayOf (func) | Array of functions that gets called with the following object to helpyou build a prallax animation.index: Integer Index of the slideslide: Number Number between 0 and slides.length. use this to make the parallax animation.activeItemIndex: Integer The current active item indexcontainerWidth: Number The container width | |
| springConfig | shape {stiffness: numberdamping: number} | presets.noWobble | React motion configurations.More about this here |
| breakPointRatio | number | 0.5 | Number between 0 and 1 used to see if the slide should be turned or not.For example setting this at 0.1 will switch the slide with the slightestuser move. |
| activeItemIndex | number | 0 | Use this to set the active item index at mount. |
| onActiveItemChange | func | Called when the active item change passing the item index | |
| indicatorsBottom | number | 30 | Indicators bottom absolute position. |
| enableTimer | bool | true | Whether or not to enable timer. |
| timerInterval | number | 3000 | Only available if enableTimer is true. |
| enableIndicators | bool | true | If true we will render default indicators that matches apple design. |
Contributing
To contribute, follow these steps:
- Fork this repo.
- Clone your fork.
- Run
npm install - Run
npm start - Goto
localhost:3000 - Add your patch then push to your fork and submit a pull request
License
MIT