Name: nuka-carousel
Owner: Formidable
Description: Pure React Carousel Component
Created: 2015-04-20 19:52:07.0
Updated: 2018-01-18 18:38:58.0
Pushed: 2018-01-15 14:59:51.0
Homepage: http://kenwheeler.github.io/nuka-carousel
Size: 537
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
A Pure ReactJS Carousel Component
install nuka-carousel
strict';
React = require('react');
createReactClass = require('create-react-class');
Carousel = require('nuka-carousel');
t App = createReactClass({
xins: [Carousel.ControllerMixin],
nder() {
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>
)
le.exports = App;
The demo can be launched on local machine via webpack-dev-server
. Run the following:
f webpack-dev-server is not installed globally
de_modules/.bin/webpack-dev-server
Now, you can access the application on your localhost at following url: Demo
React.PropTypes.func
Hook to be called after a slide is changed.
React.PropTypes.bool
Autoplay mode active. Defaults to false.
React.PropTypes.number
Interval for autoplay iteration. Defaults to 3000.
React.PropTypes.func
Hook to be called before a slide is changed.
React.PropTypes.oneOf(['left', 'center', 'right'])
When displaying more than one slide, sets which position to anchor the current slide to.
React.PropTypes.number
Space between slides, as an integer, but reflected as px
React.PropTypes.func
Used with the ControllerMixin to add carousel data to parent state.
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:
Decorators = [{
mponent: createReactClass({
render() {
return (
<button
onClick={this.props.previousSlide}>
Previous Slide
</button>
)
}
,
sition: 'CenterLeft',
yle: {
padding: 20
alid position properties are TopLeft, TopCenter, TopRight
enterLeft, CenterCenter, CenterRight, BottomLeft, BottomCenter
nd BottomRight
React.PropTypes.bool
Enable mouse swipe/dragging
React.PropTypes.string
Animation easing function. See valid easings here: https://github.com/chenglou/tween-functions
React.PropTypes.string
Used to set the margin of the slider frame. Accepts any string dimension value such as "0px 20px"
or "500px"
.
React.PropTypes.string
Used to set overflow style property on slider frame. Defaults to hidden
.
React.PropTypes.string
Animation easing function when swipe exceeds edge. See valid easings here: https://github.com/chenglou/tween-functions
React.PropTypes.number
Initial height of the slides in pixels.
React.PropTypes.number
Initial width of the slides in pixels.
React.PropTypes.number
Manually set the index of the slide to be shown.
React.PropTypes.number
Slides to show at once.
esToScroll: React.PropTypes.oneOfType([
act.PropTypes.number,
act.PropTypes.oneOf(['auto'])
Slides to scroll at once. Set to "auto"
to always scroll the current number of visible slides.
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.number
Animation duration.
React.PropTypes.bool
Enable touch swipe/dragging
React.PropTypes.bool
Enable the slides to transition vertically.
React.PropTypes.string
Used to hardcode the slider width. Accepts any string dimension value such as "80%"
or "500px"
.
React.PropTypes.bool
Sets infinite wrapAround mode. Defaults to false
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:
t App = createReactClass({
xins: [Carousel.ControllerMixin],
nder() {
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:
t App = createReactClass({
xins: [Carousel.ControllerMixin],
nder() {
return (
<Carousel ref="carousel" data={this.setCarouselData.bind(this, 'carousel')}>
...
</Carousel>
{this.state.carousels.carousel ? <button type="button" onClick={this.state.carousels.carousel.goToSlide.bind(null,4)}>
Go to slide 5
</button> : null}
)
See the Contribution Docs.