JSFiddle - React, Tailwind, and code Playground

by spinal007

HTML

<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<!-- put these links just above container div on the site -->
<a href="javascript:;" class="scroll-nav" id="lft">scroll left</a>
<a href="javascript:;" class="scroll-nav" id="rgt">scroll right</a>

<!-- ignore stuff below this line -->
<div class="container horizontal-only">
    <div class="assets_wrap">
        <div class="asset" style="width:150px;">hey</div>
        <div class="asset" style="width:200px;">hey</div>
        <div class="asset" style="width:100px;">hey</div>
        <div class="asset" style="width:400px;">hey</div>
        <div class="asset" style="width:100px;">hey</div>
        <div class="asset" style="width:100px;">hey</div>
        <div class="asset" style="width:200px;">hey</div>
        <div class="asset" style="width:200px;">hey</div>
        <div class="asset" style="width:600px;">hey</div>
        <div class="asset" style="width:100px;">hey</div>
        <div class="asset" style="width:600px;">hey</div>
        <div class="asset" style="width:100px;">hey</div>
        <div class="asset" style="width:200px;">hey</div>
        <div class="asset" style="width:200px;">hey</div>
    </div>
</div>

CSS

.container{ width: 100%; max-height: 550px; height: 550px; overflow: auto; }
.assets_wrap{ height:auto; width:auto; }
.asset{ height:550px; margin:0 20px 0 0; float:left; }
.jspHorizontalBar{ display:none!important; }

.scroll-nav{
    margin-top:50px;
    width:53px; height:53px; float:left; position:absolute;
    text-indent:-999px; overflow:hidden; z-index:99999;
    background:url('http://fyneworks.com/arrows.png') 0 0 no-repeat;
}
a#lft{ background-position:0 0; }
a#lft:hover{ background-position:0 -53px; }
a#rgt{ background-position:-53px 0; }
a#rgt:hover{ background-position:-53px -53px; }



/* for debugging on jsfiddle only */
.scroll-pane{ background:red; }
.asset{ background:blue; }

JavaScript

$(function(){
    var scroll_by = $(body).width()*0.8;
    var gap_width = 20;
    var arrow_width = 53;
    
    var w = 0;
    $('.asset').each(function(){
     w += $(this).outerWidth() + gap_width;
    });
    $('.assets_wrap').width(w).height($('.container').height());
    $('#rgt').css('margin-left', $('.container').width()-arrow_width);

    var pane = $('.container');
    pane.jScrollPane({ animateScroll: true });
	var api = pane.data('jsp');
    
	$('.scroll-nav').bind('click',function(){
        api.scrollBy(scroll_by * ($(this).is('#lft')?-1:1) );
		return false;
	});
});