JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<script src="https://raw.github.com/EightMedia/hammer.js/master/dist/hammer.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="https://raw.github.com/EightMedia/hammer.js/master/plugins/jquery.hammer.js"></script>
<div id="carouselContainer" class="carousel">
    <ul class="unstyled">
    <li class="pull-left">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeGQYrG8U5NwsoOOr_ztCcAqTy37AJyi4BMf_dJp9_su4xsUIg"/>
    </li>
     <li class="pull-left">
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQkcXs-qFPpoDX2Yh7A6IMRtoNvLRa-Fj_MKaIBal92xgo--7DDyQ"/>
    </li>
     <li class="pull-left">
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTVjEo-Y20sY5viH8m-PDCeJFoOtdmD4ETpj2XSfmGwcG3r_wnq"/>
    </li>
     <li class="pull-left">
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQYj0sq3Sbg0zJinwwnnQvA1-9IM9NLNyMpXh1obvfwsnBBR9tF"/>
    </li>
</ul>
</div>

CSS

div.carousel{
    width: 400px;
    overflow:hidden;
}

div.carousel ul{
    width: 500%;
    list-style: none;
     position:relative;
    overflow:hidden; /* This is used solely to clear floats, it does not add functionality. */
    border: 1px dotted green;
     
}

div.carousel ul li{
   position:relative;
    float:left;
    padding: 10px;   
}

div.carousel ul li img {
 
    display:block;
   
}

JavaScript

$(function(){
    var $active = null;
    
    $('.unstyled').hammer().on("swipeleft", function(event) {
        $active = $active || $(this).first("li");
        console.log($active);
        
        var $before = $active;
        var $after = $before.next("li");
        
        var mLeftBefore = $before.css('margin-left') || 0;
        console.log(mLeftBefore);
        $before.animate({'margin-left' : -270 + mLeftBefore});
        $after.animate({'margin-left' : -270});
        
        $active = $after;
    });
    
        $('.unstyled').hammer().on("swiperight", function(event) {
        var $before = $(this).prev();
        var mLeftBefore = $before.css('margin-left') || 0;
        console.log(mLeftBefore);
        $before.animate({'margin-left' : 270 + mLeftBefore});
        $(this).animate({'margin-left' : 0});
    });


});