JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
	<div class="block-scroll">
		<div class="block__item">1</div>
		<div class="block__item">2</div>
		<div class="block__item">3</div>
		<div class="block__item">4</div>
		<div class="block__item">5</div>
		<div class="block__item">6</div>
	</div>
</div>


<div class="block-2" style="margin-top:50px;">
	<div class="block-scroll">
		<div class="block__item">1</div>
		<div class="block__item">2</div>
		<div class="block__item">3</div>
		<div class="block__item">4</div>
		<div class="block__item">5</div>
		<div class="block__item">6</div>
	</div>
</div>

CSS

.block,.block-2 {
			width:700px;
			height:200px;
			overflow:hidden;
			background:#000000;
		}
		.block-scroll > div {
			width:300px;
			height:200px;
			margin-right:50px;
			background:#bc1b1b;
			float:left;
			position: relative;
		}
		.block-scroll{
			position: relative;
			width: 2100px;
            overflow:auto;
		}

JavaScript

var Slider = function() {

    this.init = function(elem){
		this.elem = elem;
		this.blocks = $('.block__item', elem);
		this.eventHandlers();
	},
	this.eventHandlers = function(){
		var _this = this;
        this.elem.on('mouseenter', function(e){
			_this.onEnterAction(e);
		});
        this.elem.on('mouseleave', function(e){
			_this.onLeaveAction(e);
		});
	},
	this.onEnterAction = function(e){
		var _this = this;
        if(this.interval) clearInterval(this.interval);
        
		this.interval = setInterval(function(){
			var left = _this.elem.scrollLeft();
            _this.elem.scrollLeft(left + 5);

		}, 50);
	},
	this.onLeaveAction = function(){

		clearInterval(this.interval);
	}
	
};
var slider = new Slider();
slider.init($('.block'));
var slider2 = new Slider();
slider2.init($('.block-2'));