After spending hours trying to find a React carousel that fit my extremely basic needs:

1. No style sheets to force my way into to customize the carousel.
2. Supply a component or markup to the carousel.
3. Autosize the size of the slide to the parent container.
4. Control the carousel with any button or component.
5. Loop.
6. Set initial slide index.
7. Disable tabbing to next slide. This is the most important as I was using a form in each slide and didn't want the carousel to jump to the next slide until the current slide was validated.

I decided to roll yet another carousel because my basic needs couldn't be met by the masses.

1.1.0 Update: Added autoplay and swipe left/right to navigate through slides on mobile. Added autoplay.

Installation

npm i --save reactium-carousel

Usage

import React from 'react';
import { Carousel, Slide } from 'reactium-carousel';

// Your component
export default class Demo extends React.Component {

    constructor(props) {
        super(props);

        // Create a reference to the carousel
        // so we can control it with buttons
        this.carousel = null;
    }

    render() {
        return (
            <div>
                <div style={{width: 500, height: 500}}>
                    <Carousel speed={0.25} loop={true} startIndex={0} ref={elm => (this.carousel = elm)}>
                        <Slide>SLIDE - 1</Slide>
                        <Slide>SLIDE - 2</Slide>
                        <Slide>SLIDE - 3</Slide>
                    </Carousel>
                </div>
                <div>
                    <button type='button' onClick={() => this.carousel.prev()}>
                        back
                    </button>
                    <button type='button' onClick={() => this.carousel.next()}>
                        next
                    </button>
                    <button type='button' onClick={() => this.carousel.jumpTo(2)}>
                        Slide - 3
                    </button>
                </div>
            </div>
        )
    }
}

Carousel Props

autoplay

Boolean : Autoplay the slides and display for a fixed period of time: duration.

Default : false

duration

Number : Time in seconds to display a slide when autoplay is true.

Default : 10

loop

Boolean : Loop back to the first slide when at the end of the slides list.

Default : false

pauseOnHover

Boolean : Pause autoplay on mouse hover.

Default : true

speed

Number : Time in seconds of the slide animation.

Default : 0.5

startIndex

Number : Zero based integer that sets the initial slide displayed.

Default : 0

style

Object : Style object applied to the Carousel.container DOM element.

swipeable

Boolean : Enable/Disable swipe navigation when in a mobile view.

Default : true

Carousel Public Properties

animating

Boolean : The animation status.

container

DOMElement : The Carousel wrapper <div> element.

index

Number : The active slide index.

paused

Boolean : The autoplay status.

Carousel Methods

next()

Navigate to the next slide. If loop is true, navigate to the first slide.

prev()

Navigate to the prev slide. If loop is true, navigate to the last slide.

jumpTo(index:Number)

Navigate to the specified slide index.

play()

Start the autoplay. This will reset the timer back to zero.

pause()

Pause the autoplay and sets the paused property to: true.

resume()

Resume the autoplay and sets the paused property to: false.

stop()

Stop the autoplay. This will reset the timer back to zero.

Carousel Events

onComplete

Triggered after the animation has completed.

onChange

Triggered after the animation has completed and state update.

onNext / onPrev

Triggered before the next/previous animation.

onPlay

Triggered when play() function is called.

onPause

Triggered when the pause() function is called.

onResume

Triggered when the resume() function is called.

onStop

Triggered when the stop() function is called.

Roadmap

These features we not apart of my initial release because I didn't need them at the time.

1. ~~Autoplay~~. Added in 1.1.0
2. ~~Swipe next/prev~~. Added in 1.1.0

Contributing

The src is built on Reactium.. learn that $#!+

No really PRs are more than welcome...

Clone the source repo from here.

Install dependencies and run locally:

$ cd /Your/Copy/of/repo
$ npm install && npm run local

Navigate to the ~/src/app/components/ReCarousel directory.

Profit.