JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<div class="block">
  <div class="scroll"></div>
</div>

CSS

.block {
  width: 220px;
  padding: 20px 0;
  background: #ccc;
  overflow: hidden;
}

.scroll {
  width: 400px;
  height: 20px;
  background: url(https://68.media.tumblr.com/3c4fac5f9c3aebca5ab99e892d5fcc9f/tumblr_oj9g1o9cqz1tqcxlro1_540.jpg);
   position: relative;
   left: 0;
}

JavaScript

var scroll = $('.scroll');

scroll.mousedown(function (e) {
	var dot = e.pageX;
    $(this).mousemove(function (e) {
    var left = scroll.css('left').replace("px",'');
    var dot_move = e.pageX;
    if (dot_move>dot_move) {
    scroll.css({
        'left': (left - 1)+'px'
        });
    } else {
    scroll.css({
        'left': (left + 1)+'px'
        });
    }
    
        
    });
}).mouseup(function () {
    $(this).unbind('mousemove');
}).mouseout(function () {
    $(this).unbind('mousemove');
});