JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://github.com/brandonaaron/jquery-mousewheel/raw/master/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 = 1,
offsetStep = 5;
scrollWrapper = $('#wrap');
scrollContent = $('#content');
//event handling for buttons "left", "right"
$('.bttR, .bttL')
.mousedown(function() {
scrollContent.data('loop', true).loopingAnimation($(this), $(this).is('.bttR') );
})
.bind("mouseup mouseout", function(){
scrollContent.data('loop', false).stop();
});
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') == true) {
this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
}
})
.mousewheel(function (event, delta) {
this.scrollLeft -= (delta * 30);
})
.css({
'overflow' : 'hidden',
'cursor' : '-moz-grab'
});
$.fn.loopingAnimation = function(el, dir){
if(this.data('loop')){
var sign = (dir) ? '-=' : '+=';
this.animate({ marginLeft: sign + offsetStep + 'px' }, animateTime, function(){ $(this).loopingAnimation(el,dir) });
}
return false;
};
})