JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script>
<div id="wrap">
<div id="content">
</div>
</div>
<button class="bttL">Left</button> <button class="bttR">Right</button>
CSS
#content { width: 2047px; height: 395px; background: url(http://farm1.static.flickr.com/166/390115705_395e9888e5_o.jpg); overflow: hidden; cursor: -moz-grab; }
JavaScript
$(document).ready(function(){
var animateTime = 10,
offsetStep = 5,
scrollWrapper = $('#wrap');
//event handling for buttons "left", "right"
$('.bttR, .bttL')
.mousedown(function() {
scrollWrapper.data('loop', true);
loopingAnimation($(this), $(this).is('.bttR') );
})
.bind("mouseup mouseout", function(){
scrollWrapper.data('loop', false).stop();
$(this).data('scrollLeft', this.scrollLeft);
});
scrollWrapper
.mousedown(function(event) {
$(this)
.data('down', true)
.data('x', event.clientX)
.data('scrollLeft', this.scrollLeft);
return false;
})
.mouseup(function (event) {
$(this).data('down', false);
})
.mousemove(function (event) {
if ($(this).data('down')) {
this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
}
})
.mousewheel(function (event, delta) {
this.scrollLeft -= (delta * 30);
})
.css({
'overflow' : 'hidden',
'cursor' : '-moz-grab'
});
loopingAnimation = function(el, dir){
if(scrollWrapper.data('loop')){
var sign = (dir) ? offsetStep : -offsetStep;
scrollWrapper[0].scrollLeft += sign;
setTimeout( function(){ loopingAnimation(el,dir) }, animateTime );
}
return false;
};
})