nuka-carousel + react-modal = :( - workaround - https://github.com/kenwheeler/nuka-carousel/issues/120

app.js

'use strict';

import Carousel from "../src/carousel";
import React from "react";
import ReactDom from "react-dom";
import Modal from "react-modal";

window.React = React;

const App = React.createClass({
    mixins: [Carousel.ControllerMixin],

    getInitialState() {
        return {
            slideIndex: 0, isModalOpened: false
        };
    },

    hack(index) {
        setTimeout(() => {
            window.dispatchEvent(new Event('resize'));
        }, 500);
    },

    goToSlide() {
        this.refs.slideshow.goToSlide(0);
    },

    render() {
        return (
            <div style={{width: '50%', margin: 'auto'}}>

                <Modal ref="modal" isOpen={ this.state.isModalOpened } onAfterOpen={ this.goToSlide }>
                    <Carousel
                        ref="slideshow"
                        data={this.setCarouselData.bind(this, 'carousel')}
                        slideIndex={this.state.slideIndex}
                        afterSlide={newSlideIndex => {
                            this.setState({ slideIndex: newSlideIndex });
                            this.hack(newSlideIndex);
                        }}>
                        <img src="http://placehold.it/1000x400&text=slide1"/>
                        <img src="http://placehold.it/1000x400&text=slide2"/>
                        <img src="http://placehold.it/1000x400&text=slide3"/>
                        <img src="http://placehold.it/1000x400&text=slide4"/>
                        <img src="http://placehold.it/1000x400&text=slide5"/>
                        <img src="http://placehold.it/1000x400&text=slide6"/>
                    </Carousel>
                </Modal>


                <button onClick={() => this.setState({ slideIndex: 0 })}>1</button>
                <button onClick={() => this.setState({ slideIndex: 1 })}>2</button>
                <button onClick={() => this.setState({ slideIndex: 2 })}>3</button>
                <button onClick={() => this.setState({ slideIndex: 3 })}>4</button>
                <button onClick={() => this.setState({ slideIndex: 4 })}>5</button>
                <button onClick={() => this.setState({ slideIndex: 5 })}>6</button>
                <button onClick={() => {
                        this.setState({ isModalOpened: true })
                    }}>Open modal
                </button>
            </div>
        )
    }
});

const content = document.getElementById('content');

ReactDom.render(<App/>, content)