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>

CSS

.block {
			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: 20000em;
		}

JavaScript

var Slider = {
	init: function(elem){

		this.elem = elem;
		this.blocks = this.elem.querySelectorAll('.block__item');
		this.eventHandlers();
	},
	eventHandlers: function(){
		console.log(this.elem);
		this.elem.onmouseenter = bind(this.onEnterAction, this);
		this.elem.onmouseleave  = bind(this.onLeaveAction, this);

	},
	onEnterAction: function(e){
		var _this = this;
        if(this.interval) clearInterval(this.interval);
		this.interval = setInterval(function(){

			var computedStyle = getComputedStyle(_this.blocks[0]);

			_this.blocks.forEach(function(block, index) {

				block.style.left = (block.style.left)?(parseInt(block.style.left) - 5) + 'px':  '-5px';

			});

			if(Math.abs(parseInt(_this.blocks[0].style.left)) >= _this.blocks[0].offsetWidth + parseInt(computedStyle.marginRight)){

				_this.blocks[0].parentNode.appendChild(_this.blocks[0]);
				_this.blocks = _this.elem.querySelectorAll('.block__item');

				_this.blocks.forEach(function(block, index) {

					block.style.left = '0px';

				});
			}
		}, 50);
	},
	onLeaveAction: function(){

		clearInterval(this.interval);
	}
};

Slider.init(document.querySelectorAll('.block')[0]);

function bind(func, context) {
	return function() { 
		return func.apply(context, arguments);
	};
}
NodeList.prototype.forEach = Array.prototype.forEach;
HTMLCollection.prototype.forEach = Array.prototype.forEach;