Slider/Carousel powered by React Motion.
npm install react-motion-slider
Slider/Carousel powered by React Motion.
npm install react-motion-slider --save
bower install react-motion-slider --save
js
ref="slider"
currentKey="slide-3" // move to a specific slide by passing its key
autoHeight={true} // animate slider wrapper
>
{this.state.slides.map((slide, i) =>
slide-${i}} className="slide" />
)}
`Props
$3
Move to a slide by its key.
$3
Move to a slide by its index.
$3
The amount of slides shown in view. Defaults to
1.$3
The amount of slides to move upon using
prev and next methods. Defaults to 1.$3
Animates the wrapper height to fit the current slide. Defaults to
false.$3
Offsets the slide to align either
left (default), center, or right.$3
Enable touch and/or mouse dragging. Defaults to
true.$3
The amount the user must swipe to advance slides.
(sliderWidth * swipeThreshold). Defaults to 0.5$3
The amount of time in milliseconds that determines if a swipe was a flick or not.
$3
Accepts a React Motion spring config.
$3
Prop callback fired before slide change.
$3
Prop callback fired after slide change.
Public methods
$3
Moves to the previous slide.
$3
Advances to the next slide.
Running Locally
clone repo
git clone git@github.com:souporserious/react-motion-slider.gitmove into folder
cd ~/react-motion-sliderinstall dependencies
npm installrun dev mode
npm run devopen your browser and visit:
http://localhost:8080/`