JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.dev.min.js"></script>
<script src="https://github.com/EightMedia/hammer.js/"></script>
<script src="eightmedia.github.io/hammer.js/"></script>
<div id="carousel">
        <ul>
            <li class="pane1"><img src="http://i1360.photobucket.com/albums/r653/brylans2013/Brylans%20Cafe%20Advertisment/9f34ef72-615e-45e9-a182-ec0c670f63a6_zps7d960dc7.jpg" alt="" title=""/js><h1>Swipe right for yes</br> and left for no.</h1></li>
            <li class="pane2"><img src="http://i1037.photobucket.com/albums/a452/drmadvertising/Peninsula%20Papers/Peninsula%20Puzzles/HibachiGrillPuzz.jpg" alt="" title=""/><h1>Swipe right for yes</br> and left for no.</h1></li>
            <li class="pane3"><img src="http://i242.photobucket.com/albums/ff231/bour3/things%20I%20made%20then%20ate/hamburger.jpg" alt="" title=""/><h1>Swipe right for yes</br> and left for no.</h1></li>
            <!-- <li class="pane4"><img src="{{ STATIC_URL }}images/hummus.jpg" alt="" title=""/><h1>Swipe right for yes and</br> left for no.</h1></li>
            <li class="pane5"><img src="{{ STATIC_URL }}images/pie.jpg" alt="" title=""/><h1>Swipe right for yes</br> and left for no.</h1></li> -->
        </ul>
    </div>

CSS

html, body, #carousel, #carousel ul, #carousel li {
            min-height: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            position: relative;
        }

        #carousel {
            background: sBut ilver;
            overflow: hidden;
            width: 100%;
            -webkit-backface-visibility: hidden;
            -webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
            -webkit-transform-style: preserve-3d;
        }

        #carousel ul.animate {
            -webkit-transition: all .3s;
            -moz-transition: all .3s;
            -o-transition: all .3s;
            transition: all .3s;
        }

        #carousel ul {
            -webkit-transform: translate3d(0%,0,0) scale3d(1,1,1);
            -moz-transform: translate3d(0%,0,0) scale3d(1,1,1);
            -ms-transform: translate3d(0%,0,0) scale3d(1,1,1);
            -o-transform: translate3d(0%,0,0) scale3d(1,1,1);
            transform: translate3d(0%,0,0) scale3d(1,1,1);
            overflow: hidden;
            -webkit-backface-visibility: hidden;
            -webkit-transform-style: preserve-3d;
        }

        #carousel ul {
            -webkit-box-shadow: 0 0 20px rgba(0,0,0,.2);
            box-shadow: 0 0 20px rgba(0,0,0,.2);
            position: relative;
        }

        #carousel li {
            float: left;
            overflow: hidden;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: translate3d(0,0,0);
        }

        #carousel li h1 {
            color: #fff;
            font-size: 36px;
            text-align: center;
            position: absolute;
            top: 40%;
            left: 0;
            width: 100%;
            text-shadow: -1px -1px 0 rgba(0,0,0,.2);
        }

        #carousel li img {
        	max-height:600px;
        }

        #carousel li.pane1 {  }
        #carousel li.pane2 {  }
        #carousel li.pane3 {  }
        #carousel li.pane4 {  }
       ...

JavaScript

/*! Hammer.JS - v1.0.10 - 2014-03-28
 * http://eightmedia.github.io/hammer.js
 *
 * Copyright (c) 2014 Jorik Tangelder <[email protected]>;
 * Licensed under the MIT license */

(function(window, undefined) {
  'use strict';

/**
 * Hammer
 * use this to create instances
 * @param   {HTMLElement}   element
 * @param   {Object}        options
 * @returns {Hammer.Instance}
 * @constructor
 */
var Hammer = function(element, options) {
  return new Hammer.Instance(element, options || {});
};

Hammer.VERSION = '1.0.10';

// default settings
Hammer.defaults = {
  // add styles and attributes to the element to prevent the browser from doing
  // its native behavior. this doesnt prevent the scrolling, but cancels
  // the contextmenu, tap highlighting etc
  // set to false to disable this
  stop_browser_behavior: {
    // this also triggers onselectstart=false for IE
    userSelect       : 'none',
    // this makes the element blocking in IE10>, you could experiment with the value
    // see for more options this issue; https://github.com/EightMedia/hammer.js/issues/241
    touchAction      : 'none',
    touchCallout     : 'none',
    contentZooming   : 'none',
    userDrag         : 'none',
    tapHighlightColor: 'rgba(0,0,0,0)'
  }

  //
  // more settings are defined per gesture at /gestures
  //
};


// detect touchevents
Hammer.HAS_POINTEREVENTS = window.navigator.pointerEnabled || window.navigator.msPointerEnabled;
Hammer.HAS_TOUCHEVENTS = ('ontouchstart' in window);

// dont use mouseevents on mobile devices
Hammer.MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android|silk/i;
Hammer.NO_MOUSEEVENTS = Hammer.HAS_TOUCHEVENTS && window.navigator.userAgent.match(Hammer.MOBILE_REGEX);

// eventtypes per touchevent (start, move, end)
// are filled by Event.determineEventTypes on setup
Hammer.EVENT_TYPES = {};

// interval in which Hammer recalculates current velocity in ms
Hammer.UPDATE_VELOCITY_INTERVAL = 16;

// hammer document where the base events are added...