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 = $('.block__item', elem);
this.eventHandlers();
},
eventHandlers: function(){
var _this = this;
this.elem.on('mouseenter', function(e){
_this.onEnterAction(e);
});
this.elem.on('mouseleave', function(e){
_this.onLeaveAction(e);
});
},
onEnterAction: function(e){
var _this = this;
if(this.interval) clearInterval(this.interval);
this.interval = setInterval(function(){
console.log(_this.blocks);
_this.blocks.each(function(index, block) {
var left = ($(block).css('left') != 'auto')?(parseInt($(block).css('left')) - 5) + 'px': '-5px';
console.log($(block).css('left'));
$(block).css('left', left);
});
if(Math.abs(parseInt(_this.blocks.eq(0).css('left'))) >= _this.blocks.eq(0).outerWidth + parseInt(_this.blocks.eq(0).css('marginRight'))){
_this.blocks.eq(0).parent().append(_this.blocks.eq(0));
_this.blocks = $('.block__item', _this.elem);
_this.blocks.each(function(index, block) {
$(block).css('left', 0);
});
}
}, 50);
},
onLeaveAction: function(){
clearInterval(this.interval);
}
};
Slider.init($('.block'));
/*function bind(func, context) {
return function() {
return func.apply(context, arguments);
};
}
NodeList.prototype.forEach = Array.prototype.forEach;
HTMLCollection.prototype.forEach = Array.prototype.forEach; */