JSFiddle - React, Tailwind, and code Playground

by alekskorovin

HTML

<div class="scroller">
    <div class="btn btn-left"></div>
    <div class="btn btn-right"></div>
    <div class="scroll-area">
        <div class="scroll-item">
            Lorem Dolorem Ipsum Delipsum
        </div>
    </div>
</div>

CSS

.scroller {
    position: relative;
    height: 300px;
}
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.btn:hover {
    background: #999;
}
.btn {
    position: absolute;
    width: 20px;
    height: 100%;
    background: #ccc;
    cursor: pointer;
}
.scroll-area {
    overflow:hidden;
    padding: 0 20px;
    height: 100%;

}
.btn-left {
    left: 0;
    content: '<';
}
.btn-right {
    right: 0;
    content: '<';
}
.scroll-item {
    background: blue;
    position: relative;
    left: 200px;
    width: 300px;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 1.0s linear;
    -o-transition: all 1.0s linear;
    -ms-transition: all 1.0s linear;    
    transition: all 0.1s linear;    
}

JavaScript

var left_pos, myInterval, direction, currentPos = 0;

function changePosLeft() {
    currentPos += direction;    
    $('.scroll-item').css('transform','translateX(' + currentPos + 'px)');
    //console.log('-webkit-transform','translateX(' + currentPos + 'px);');
}

$('.btn-right').mouseenter(function() {
    direction = 50;
    myInterval = setInterval (changePosLeft, 500);  
});
$('.btn-right, .btn-left').mouseleave(function() {
    clearInterval(myInterval);    
});
$('.btn-left').mouseenter(function() {
    direction = -50;
    myInterval = setInterval (changePosLeft, 500);  
});