A Pure ReactJS Carousel Component

nuka-carousel

Pure React Carousel Component.

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

afterSlide

React.PropTypes.func

Hook to be called after a slide is changed.

autoplay

React.PropTypes.bool

Autoplay mode active. Defaults to false.

autoplayInterval

React.PropTypes.number

Interval for autoplay iteration. Defaults to 3000.

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.

cellSpacing

React.PropTypes.number

Space between slides, as an integer, but reflected as px

dragging

React.PropTypes.bool

Enable mouse swipe/dragging

easing

React.PropTypes.string

Animation easing function. 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.

edgeEasing

React.PropTypes.string

Animation easing function when swipe exceeds edge. See valid easings here: D3 Easing Functions.

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.

initialSlideHeight

React.PropTypes.number

Initial height of the slides in pixels.

initialSlideWidth

React.PropTypes.number

Initial width of the slides in pixels.

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.

slideIndex

React.PropTypes.number

Manually set the index of the slide to be shown.

slidesToShow

React.PropTypes.number

Slides to show at once.

slidesToScroll

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.

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.

swiping

React.PropTypes.bool

Enable touch swipe/dragging

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".

wrapAround

React.PropTypes.bool

Sets infinite wrapAround mode. Defaults to false

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>
    );
  }
}

GitHub