JSFiddle - React, Tailwind, and code Playground

by novomanish

HTML

<div style="height:100px;width:250px;overflow:hidden;border:1px solid black;">
    <div id="inner" style="left:0;height:100px;width:500px;position:relative;">
        <div style="width:100px;height:100px;float:left;border:1px solid red">image1</div>
        <div style="width:100px;height:100px;float:left;border:1px solid red">image2</div>
        <div style="width:100px;height:100px;float:left;border:1px solid red">image3</div>
        <div style="width:100px;height:100px;float:left;border:1px solid red">image4</div>
    </div>
</div>
<a href="javascript:;" onclick="doMove(200)">move left</a>
<a href="javascript:;" onclick="doMove(-200)">move right</a>

JavaScript

function doMove(pix){
    var inner = document.getElementById("inner");
    var currentLeft = parseInt(inner.style.left);
    var newLeft = currentLeft+pix;
    inner.style.left = newLeft+"px";
}