react-apple-carousel

Installing

$ npm install react-apple-carousel --save

Demos

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 help you build a prallax animation. index: Integer Index of the slide slide: Number Number between 0 and slides.length. use this to make the parallax animation. activeItemIndex: Integer The current active item index containerWidth: Number The container width
springConfig	shape { stiffness: number damping: 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 slightest user 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