JSFiddle - React, Tailwind, and code Playground

by Ashley Wilson

HTML

<script src="http://fb.me/react-with-addons-0.11.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
<script src="https://www.dropbox.com/s/9s5rzg3p6a5cxq9/react-router.js?dl=0&amp;raw=1"></script>
<div id="app"></div>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.arrow {
    cursor: pointer;
}
.carousel-container {
    width: auto !important;
    float: none;
    padding-bottom: 10px;
    margin: 0 auto;
}
.carousel {
    width: 300px;
    height: 200px;
    border: 1px solid #000;
    overflow: hidden;
    display: inline-block;
    position: relative;
}
.carousel-slide {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    transition: 300ms ease-in-out;
}
.carousel-slide li {
    display: inline-block;
    width: 300px;
    height: 200px;
    float: left;
}

JavaScript 1.7

/** @jsx React.DOM */
var Routes = ReactRouter.Routes;
var Route = ReactRouter.Route;

var App = React.createClass({
    getInitialState: function () {
        var slides = [{
            copy: '1. Slide',
            bg: 'red'
        }, {
            copy: '2. Slide',
            bg: 'lightblue'
        }, {
            copy: '3. Slide',
            bg: 'green'
        }];
        var selected = parseInt(this.props.params.num || 0);

        return {
            slides: slides,
            selected: selected
        };
    },
    onClickLeft: function () {
        this.setState({
            selected: this.state.selected - 1
        });
    },
    onClickRight: function () {
        this.setState({
            selected: this.state.selected + 1
        });
    },
    render: function () {
        var slides = this.state.slides.map(function (slide, i) {
            var liStyle = {
                "background-color": slide.bg
            };
            return <li key={i} style={liStyle}>{slide.copy}</li>;
        });
        var left = this.state.selected * 300 * -1,
          ulStyle = {
            width: this.state.slides.length * 300,
            "-ms-transform": "translate(" + left + "px,0px)",
            "-webkit-transform": "translate(" + left + "px,0px)",
            transform: "translate(" + left + "px,0px)"
          };
        return (
            <div className="carousel-container" onMouseMove={this.onMouseMove}>
                <span className="arrow left" onClick={this.onClickLeft}>&lt;&lt;</span>
                <div className="carousel">
                    <ul style={ulStyle} className="carousel-slide">{slides}</ul>
                </div>
                <span className="arrow right" onClick={this.onClickRight}>&gt;&gt;</span>
            </div>
        );
    }
});

var routes = (
  <Routes>
    <Route name="carousel" path="/" handler = {App}>
      <Route name="carousel-slide" path=":num" handler={App} addHandlerKey={true}/>
    </Route>
 ...