1.0.3 • Published 6 years ago
nuka-carousel-qb v1.0.3
nuka-carousel
A Pure ReactJS Carousel Component
Maintained by Sarah Meyer
Install
$ yarn add nuka-carousel
Example
import React from 'react';
import Carousel from 'nuka-carousel';
export default class extends React.Component {
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>
);
}
}
Running demo locally
The demo can be launched on local machine via webpack-dev-server
. Run the following:
yarn start
Now, you can access the application on your localhost at following url: Demo
Props
Name | PropType | Description |
---|---|---|
afterSlide | React.PropTypes.func | Hook to be called after a slide is changed |
autoGenerateStyleTag | React.PropTypes.bool | When set to true , it will generate a style tag to help ensure images are displayed properly. Set to false if you don't want or need the style tag generated. Defaults to true |
autoplay | React.PropTypes.bool | Autoplay mode active. Defaults to false |
autoplayInterval | React.PropTypes.number | Interval for autoplay iteration. Defaults to 3000 milliseconds |
beforeSlide | React.PropTypes.func | Hook to be called before a slide is changed |
cellAlign | React.PropTypes.oneOf(['left', 'center', 'right']) | When displaying more than one slide, sets which position to anchor the current slide to.Is overridden to left when transitionMode="fade" |
cellSpacing | React.PropTypes.number | Space between slides, as an integer, but reflected as px |
dragging | React.PropTypes.bool | Enable mouse swipe/dragging.Defaults to true |
easing | React.PropTypes.string | Animation easing function. See valid easings here: D3 Easing Functions |
edgeEasing | React.PropTypes.string | Animation easing function when swipe exceeds edge. See valid easings here: D3 Easing Functions |
framePadding | React.PropTypes.string | Used to set the margin of the slider frame. Accepts any string dimension value such as "0px 20px" or "500px" |
frameOverflow | React.PropTypes.string | Used to set overflow style property on slider frame. Defaults to hidden |
heightMode | React.PropTypes.oneOf(['first', 'current', 'max']) | Change the height of the slides based either on the first slide, the current slide, or the maximum height of all slides. Overrides height set by initialSlideHeight |
initialSlideHeight | React.PropTypes.number | Initial height of the slides in pixels. Defaults to 100 |
initialSlideWidth | React.PropTypes.number | Initial width of the slides in pixels |
pauseOnHover | React.PropTypes.bool | Pause autoPlay when mouse is over carousel. Defaults to true |
slideIndex | React.PropTypes.number | Manually set the index of the slide to be shown |
slidesToShow | React.PropTypes.number | Number of slides to show at once. Will be cast to an integer when transitionMode="fade" |
slidesToScroll | React.PropTypes.oneOfType([ React.PropTypes.number, React.PropTypes.oneOf(['auto'])]) | Slides to scroll at once. Set to "auto" to always scroll the current number of visible slides. Is overridden to slidesToShow when transitionMode="fade" |
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} |
speed | React.PropTypes.number | Animation duration/Transition speed in milliseconds |
swiping | React.PropTypes.bool | Enable touch swipe/dragging |
transitionMode | React.PropTypes.oneOf(['scroll', 'fade']) | Set the way slides transition from one to the next. Defaults to scroll |
vertical | React.PropTypes.bool | Enable the slides to transition vertically |
width | React.PropTypes.string | Used to hardcode the slider width. Accepts any string dimension value such as "80%" or "500px" |
withoutControls | React.PropTypes.bool | Used to remove all controls at once. Overwrites the render[Top, Right, Bottom, Left]CenterControls() . Defaults to false |
wrapAround | React.PropTypes.bool | Sets infinite wrapAround mode. Defaults to false |
render*Controls
React.PropTypes.func
A set of eight render props for rendering controls in different positions around the carousel.
- Valid render props for the eight positions are
renderTopLeftControls
,renderTopCenterControls
,renderTopRightControls
,renderCenterLeftControls
,renderCenterCenterControls
,renderCenterRightControls
,renderBottomLeftControls
,renderBottomCenterControls
, andrenderBottomRightControls
.
<Carousel
renderTopCenterControls={({ currentSlide }) => (
<div>Slide: {currentSlide}</div>
)}
renderCenterLeftControls={({ previousSlide }) => (
<button onClick={previousSlide}>Previous</button>
)}
renderCenterRightControls={({ nextSlide }) => (
<button onClick={nextSlide}>Next</button>
)}
>
{/* Carousel Content */}
</Carousel>
- The function returns the props for
goToSlide
,nextSlide
andpreviousSlide
functions in addition toslideCount
andcurrentSlide
values. Can also remove all render controls usingwithoutControls
.
External Control of Carousel State
You can control the state of the carousel from your parent component as shown below:
import React from 'react';
import Carousel from 'nuka-carousel';
export default class extends React.Component {
state = {
slideIndex: 0
};
render() {
return (
<Carousel
slideIndex={this.state.slideIndex}
afterSlide={slideIndex => this.setState({ slideIndex })}
>
<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>
);
}
}
Contributing
See the Contribution Docs.