nuka-carousel + react-modal = :( - 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 }; },

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

  <Modal isOpen={ this.state.isModalOpened } >
        <Carousel
    ref="carousel"
    data={this.setCarouselData.bind(this, 'carousel')}
    slideIndex={this.state.slideIndex}
    afterSlide={newSlideIndex => this.setState({ slideIndex: 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)