JSFiddle - React, Tailwind, and code Playground

by MichelleGlauser

HTML

<script src="http://eightmedia.github.io/hammer.js/"></script>
<body> 
    <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;
}

JavaScript

/**
    * super simple carousel
    * animation between panes happens with css transitions
    */
    function Carousel(element)
    {
        var self = this;
        element = $(element);

        var container = $(">ul", element);
        var panes = $(">ul>li", element);

        var pane_width = 0;
        var pane_count = panes.length;

        var current_pane = 0;

        var noList = [];
        var yesList = [];

        /**
         * initial
         */
        this.init = function() {
            setPaneDimensions();

            $(window).on("load resize orientationchange", function() {
                setPaneDimensions();
            })
        };


        /**
         * set the pane dimensions and scale the container
         */
        function setPaneDimensions() {
            pane_width = element.width();
            panes.each(function() {
                $(this).width(pane_width);
            });
            container.width(pane_width*pane_count);
        };


        /**
         * show pane by index
         */
        this.showPane = function(index, animate) {
            // between the bounds
            index = Math.max(0, Math.min(index, pane_count-1));
            current_pane = index;

            var offset = -((100/pane_count)*current_pane);
            setContainerOffset(offset, animate);
        };


        function setContainerOffset(percent, animate) {
            container.removeClass("animate");

            if(animate) {
                container.addClass("animate");
            }

            if(Modernizr.csstransforms3d) {
                container.css("transform", "translate3d("+ percent +"%,0,0) scale3d(1,1,1)");
            }
            else if(Modernizr.csstransforms) {
                container.css("transform", "translate("+ percent +"%,0)");
            }
            else {
                var px = ((pane_width*pane_count) / 100) * percent;
                container.css("left", px+"px");
            }
        }

 ...