Install

npm install nuka-carousel

Example

'use strict' ; var React = require ( 'react' ); var Carousel = require ( 'nuka-carousel' ); const App = React.createClass({ mixins: [Carousel.ControllerMixin], render() { return ( < Carousel > < img src = "http://placehold.it/1000x400/ffffff/c0392b/&text=slide1" /> < img src = "http://placehold.it/1000x400/ffffff/c0392b/&text=slide2" /> < img src = "http://placehold.it/1000x400/ffffff/c0392b/&text=slide3" /> < img src = "http://placehold.it/1000x400/ffffff/c0392b/&text=slide4" /> < img src = "http://placehold.it/1000x400/ffffff/c0392b/&text=slide5" /> < img src = "http://placehold.it/1000x400/ffffff/c0392b/&text=slide6" /> </ Carousel > ) } }); module .exports = App;

Props

cellAlign React.PropTypes.oneOf(['left', 'center', 'right']) When displaying more than one slide, sets which position to anchor the current slide to.

React.PropTypes.oneOf(['left', 'center', 'right']) cellSpacing React.PropTypes.number Space between slides, as an integer, but reflected as px

React.PropTypes.number data React.PropTypes.func Used with the ControllerMixin to add carousel data to parent state.

React.PropTypes.func decorators React.PropTypes.array An array of objects that supply internal carousel controls. Decorator objects have component , position & style properties. component takes a React component, position takes a predefined position string and style takes an object of styles to be applied to the decorator. See an example below: var Decorators = [{ component: React.createClass({ render() { return ( < button onClick = {this.props.previousSlide} > Previous Slide </ button > ) } }), position: 'CenterLeft' , style: { padding: 20 } }];

React.PropTypes.array dragging React.PropTypes.bool Enable mouse swipe/dragging

React.PropTypes.bool easing React.PropTypes.string Animation easing function. See valid easings here: https://github.com/chenglou/tween-functions

React.PropTypes.string edgeEasing React.PropTypes.string Animation easing function when swipe exceeds edge. See valid easings here: https://github.com/chenglou/tween-functions

React.PropTypes.string slidesToShow React.PropTypes.number Slides to show at once.

React.PropTypes.number slidesToScroll React.PropTypes.number Slides to scroll at once.

React.PropTypes.number slideWidth React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]) Manually set slideWidth. If you want hard pixel widths, use a string like slideWidth="20px" , and if you prefer a percentage of the container, use a decimal integer like slideWidth={0.8}

React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]) speed React.PropTypes.number Animation duration.

React.PropTypes.number width React.PropTypes.string Used to hardcode the slider width. Accepts any string dimension value such as "80%" or "500px" .

ControllerMixin

The ControllerMixin provides a way to add external controllers for a carousel. To use the controller mixin, add it to your parent component as shown below:

const App = React.createClass({ mixins: [Carousel.ControllerMixin], render() { return ( < Carousel ref = "carousel" data = {this.setCarouselData.bind(this, ' carousel ')}> ... </ Carousel > ) } });

It is required to give your component a ref value, and to pass the setCarouselData method to the data prop with the same ref as an argument.

After setting this up, your parent component has a carousels object in it's state. You can now control your carousels from other child components: