JSFiddle - React, Tailwind, and code Playground

by celestialcitizen

HTML

<link rel="stylesheet" href="http://current.bootstrapcdn.com/bootstrap-v204/css/bootstrap.min.css">
<script src="http://hitconsultants.com/dragscroll_scrollsync/dragscrollable.js"></script>
<script src="https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/blob/master/jquery.touchSwipe.js"></script>
<div class="myClass">
    <div class="row panel_list">
        <div class="span5">Panel 1</div>
        <div class="span5">Panel 2</div>
        <div class="span5">Panel 3</div>
                <div class="span5">Panel 4</div>
                <div class="span5">Panel 5</div>
                <div class="span5">Panel 6</div>
    </div>
</div>

CSS

div.myClass {
    overflow-x: hidden;
    white-space: nowrap;
}
div.myClass [class*="span"] {
    display: inline-block;
    float: none; /* Very important */
}

/* Test purposes */
.myClass .span5 { background: blue; margin-top: 5px;min-height: 50px; }
div.myClass {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}

JavaScript

//to detect if device has touch enabled
var is_touch_device = 'ontouchstart' in document.documentElement;

        $(function() 
        {
                $('.myClass').dragscrollable();
                //if touch is enabled then we have to map the swipe event                         
                if(is_touch_device)
                    $('.panel_list').swipe( { swipeStatus:scroll_panel_list, allowPageScroll:'horizontal' } );
                function scroll_panel_list(event, phase, direction, distance)
                {
                    var pos = $('.myClass').scrollLeft();
                    if(direction == 'left')
                    {
                        $('.myClass').animate({scrollLeft: pos + 200} );
                    }
                    if(direction == 'right')
                    {
                        $('.myClass').animate({scrollLeft: pos - 200} );
                    }
                }    
            });