var React = require('react');
var ReactDOM = require('react-dom');
var Carousel = require('react-responsive-carousel').Carousel;

var DemoSliderControls = function(){
    return (
        <Carousel type="slider" showControls={true} showStatus={true}>
            <img src="assets/1.jpeg" />
            <img src="assets/2.jpeg" />
            <img src="assets/3.jpeg" />
            <img src="assets/4.jpeg" />
            <img src="assets/5.jpeg" />
            <img src="assets/6.jpeg" />
            <img src="assets/7.jpeg" />
        </Carousel>
    );
};

ReactDOM.render(<DemoSliderControls />, document.querySelector('.demo-slider-controls'));

// Don't forget to include the css in your page 
// <link rel="stylesheet" href="carousel.css"/>

var React = require('react');
var ReactDOM = require('react-dom');
var ImageGallery = require('react-responsive-carousel').ImageGallery;

var DemoGallery = function() {
    return (
        <ImageGallery showControls={true} showStatus={true}>
            <img src="assets/1.jpeg" />
            <img src="assets/2.jpeg" />
            <img src="assets/3.jpeg" />
            <img src="assets/4.jpeg" />
            <img src="assets/5.jpeg" />
            <img src="assets/6.jpeg" />
        </ImageGallery>
    );
};

ReactDOM.render(<DemoGallery />, document.querySelector('.demo-gallery'));

// Don't forget to include the css in your page
// <link rel="stylesheet" href="imageGallery.css"/>
// <link rel="stylesheet" href="carousel.css"/>

var React = require('react');
var ReactDOM = require('react-dom');
var Carousel = require('react-responsive-carousel').Carousel;

var DemoCarousel = function() {
    return (
        <Carousel>
            <img src="assets/1.jpeg" />
            <img src="assets/2.jpeg" />
            <img src="assets/3.jpeg" />
            <img src="assets/4.jpeg" />
            <img src="assets/5.jpeg" />
            <img src="assets/6.jpeg" />
            <img src="assets/7.jpeg" />
        </Carousel>
    );
};

ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));

// Don't forget to include the css in your page
// <link rel="stylesheet" href="carousel.css"/>

var React = require('react');
var Carousel = require('./Carousel');

module.exports = React.createClass({
    
    getDefaultProps () {
        return {
            selectedItem: 0
        }
    },

    getInitialState () {
        return {
            selectedItem: this.props.selectedItem
        }
    },

    selectItem (selectedItem) {
        this.setState({
            selectedItem: selectedItem
        });
    },

    render () {
        return (
            <div className="image-gallery">
                <Carousel type="slider" selectedItem={this.state.selectedItem} showControls={this.props.showControls} showStatus={this.props.showStatus} onChange={this.selectItem} onSelectItem={ this.selectItem }>
                    { this.props.children }
                </Carousel>
                <Carousel selectedItem={this.state.selectedItem} onSelectItem={ this.selectItem }>
                    { this.props.children }
                </Carousel>
            </div>
        );
    }
});