Pure React Carousel Component
Latest commit 27c121e Nov 16, 2018
Permalink
Failed to load latest commit information.
.github create ISSUE_TEMPLATE.md Sep 13, 2018
.vscode revert initialSlideHeight changes Sep 13, 2018
demo change Toggle 2 Slides to Toggle Show 2 Slides Only Nov 13, 2018
src add keyboardControls prop to disable keyboard controls (#445) Nov 16, 2018
test add keyboardControls prop to disable keyboard controls (#445) Nov 16, 2018
.babelrc Feature/accessibility (#425) Oct 19, 2018
.eslintignore Chore - Potpourri! (Add lint, npm version workflow, CI updates, clean… Mar 12, 2018
.eslintrc Fix lint usage w/ prettier. (#322) Mar 30, 2018
.gitignore use nextProps in goToSlide to properly scroll to dynamically added sl… Aug 8, 2018
.npmignore Upgrade build processes and dependencies (#288) Mar 1, 2018
.travis.yml UI Tests (#308) Mar 19, 2018
CHANGELOG.md update changelog Nov 16, 2018
CONTRIBUTING.md UI Tests (#308) Mar 19, 2018
LICENSE Chore - Potpourri! (Add lint, npm version workflow, CI updates, clean… Mar 12, 2018
README.md add keyboardControls prop to disable keyboard controls (#445) Nov 16, 2018
index.js Upgrade build processes and dependencies (#288) Mar 1, 2018
jest-puppeteer.config.js UI Tests (#308) Mar 19, 2018
jest.e2e.config.js UI Tests (#308) Mar 19, 2018
jest.unit.config.js UI Tests (#308) Mar 19, 2018
package.json 4.4.3 Nov 16, 2018
prettier.config.js Test Refactor (#289) Mar 7, 2018
webpack.config.js Upgrade build processes and dependencies (#288) Mar 1, 2018
webpack.dist.config.js Upgrade build processes and dependencies (#288) Mar 1, 2018
yarn.lock Feature/accessibility (#425) Oct 19, 2018

README.md

nuka-carousel

A Pure ReactJS Carousel Component

Maintained by Sarah Meyer

Nuka Carousel Animated Example

Install

To add nuka-carousel to your project run the following command in your project folder.

$ 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 your local machine via webpack-dev-server. Once you have clone this repo locally, run the following:

yarn
yarn build
yarn start

You can access the application on your localhost at the following url: Local Demo

Or on CodeSandeBox at the following url: CodeSandBox Demo

Keyboard Controls

Key Combination Function
Right/Up Arrow or D/W key Next slide
Left/Down Arrow or A/S key Previous slide
Q key First slide
E key Last slide
SpaceBar When autoplay={true} pauses and unpauses carousel

Props

Name PropType Description Default
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. true
autoplay React.PropTypes.bool Autoplay mode active. false
autoplayInterval React.PropTypes.number Interval for autoplay iteration. 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. 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. 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. 100
initialSlideWidth React.PropTypes.number Initial width of the slides in pixels
disableKeyboardControls React.PropTypes.bool When set to true will disable keyboard controls. false
pauseOnHover React.PropTypes.bool Pause autoPlay when mouse is over carousel. 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. 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(). false
wrapAround React.PropTypes.bool Sets infinite wrapAround mode. 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, and renderBottomRightControls.
<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 and previousSlide functions in addition to slideCount and currentSlide values. Can also remove all render controls using withoutControls.

  • NOTE: The className slide-visible is added to the currently visible slide.

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.