nuka-carousel

A Pure ReactJS Carousel Component

Maintained by Sarah Meyer

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="https://via.placeholder.com/400/ffffff/c0392b/&text=slide1" />         <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide2" />         <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide3" />         <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide4" />         <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide5" />         <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide6" />       </Carousel>     );   } }

Running demo locally

The demo can be launched on your local machine via webpack-dev-server. Make sure you are running node version 9.11 or earlier. Once you have cloned 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 CodeSandBox at the following url: CodeSandBox Demo

Keyboard Controls

• Keyboard shortcuts are disabled as a default. To enable them set enableKeyboardControls prop to true.

Props

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.

• The default props are set as renderCenterLeftControls for Previous button, renderCenterRightControls for the Next button and renderBottomCenterControls for the "Paging dots". To change the position or remove "Paging dots", the default positions need to be disabled by setting them to null.

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

renderAnnounceSlideMessage

React.PropTypes.func

renderAnnounceSlideMessage render prop is a special case of the render*Controls props. It's responsibility is to render ARIA live announcement message to improve accessibility. The prop will announce the message you pass in every time the slide changes with VoiceOver enabled on your machine. The function returns only slideCount and currentSlide values.

<Carousel   renderAnnounceSlideMessage={({ currentSlide, slideCount }) =>     `Slide ${currentSlide + 1} of ${slideCount}`   } >   {/* Carousel Content */} </Carousel>

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="https://via.placeholder.com/400/ffffff/c0392b/&text=slide1" />         <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide2" />         <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide3" />         <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide4" />         <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide5" />         <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide6" />       </Carousel>     );   } }

TypeScript

TypeScript type definitions are now shipped with nuka-carousel. You can use them directly from the library.

Resizing Height Issue

When using dynamic content in a slide such as text, you may see an issue with resizing the height of the component when loading in an iframe, or forcing the component to load synchronously after another component such as a loading screen, or interstitial.

How resizing works

In componentDidMount, the initial dimensions are assigned to each slide:

• Width: initialSlidewidth || slideWidth || (slidesToShow / width of container)
• Height: initialSlideHeight

Once the component has completed mounting with the accurate width, it waits for the readyStateChange event to fire before measuring the desired height of the content (current, first, max). That measurement then replaces initialSlideHeight with the measured height in pixels.

If the readyStateChange event fires before the component completes mounting, the height of the component is not measured until a resize event or a change in slide is triggered.

Contributing

See the Contribution Docs.

Maintenance Status

Active: Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.