Slider/Carousel powered by React Motion.
Last updated 5 years ago by souporserious .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-motion-slider 
SYNC missed versions from official npm registry.

React Motion Slider

Dependency Status

Slider/Carousel powered by React Motion.



npm install react-motion-slider --save

bower install react-motion-slider --save

Example Usage

    currentKey="slide-3" // move to a specific slide by passing its key
    autoHeight={true} // animate slider wrapper
    {, i) =>
      <li key={`slide-${i}`} className="slide" />
  <nav className="slider__controls">
      className="slider__control slider__control--prev"
      onClick={() => this.refs['slider'].prev()}
      className="slider__control slider__control--next"
      onClick={() => this.refs['slider'].next()}


currentKey: PropTypes.any

Move to a slide by its key.

currentIndex: PropTypes.number

Move to a slide by its index.

slidesToShow: PropTypes.number

The amount of slides shown in view. Defaults to 1.

slidesToMove: PropTypes.number

The amount of slides to move upon using prev and next methods. Defaults to 1.

autoHeight: PropTypes.bool

Animates the wrapper height to fit the current slide. Defaults to false.

align: PropTypes.oneOf(['left', 'center', 'right'])

Offsets the slide to align either left (default), center, or right.

swipe: PropTypes.oneOf([true, false, 'touch', 'mouse'])

Enable touch and/or mouse dragging. Defaults to true.

swipeThreshold: PropTypes.number

The amount the user must swipe to advance slides. (sliderWidth * swipeThreshold). Defaults to 0.5

flickTimeout: PropTypes.number

The amount of time in milliseconds that determines if a swipe was a flick or not.

springConfig: React.PropTypes.objectOf(React.PropTypes.number)

Accepts a React Motion spring config.

beforeSlide: PropTypes.func(currentIndex, nextIndex)

Prop callback fired before slide change.


Prop callback fired after slide change.

Public methods


Moves to the previous slide.


Advances to the next slide.

Running Locally

clone repo

git clone

move into folder

cd ~/react-motion-slider

install dependencies

npm install

run dev mode

npm run dev

open your browser and visit: http://localhost:8080/

Current Tags

  • 0.4.1                                ...           latest (5 years ago)

7 Versions

  • 0.4.1                                ...           5 years ago
  • 0.4.0                                ...           5 years ago
  • 0.3.0                                ...           5 years ago
  • 0.2.0                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
  • 0.0.2                                ...           5 years ago
  • 0.0.1                                ...           5 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (3)
Dev Dependencies (20)
Dependents (1)

Copyright 2014 - 2017 © |