JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box"><div></div></div>

CSS

#box{
 background-color:green;
 width:200px;
 height:200px;
 overflow:hidden;
}
#box>div{
 height:200px;
 -webkit-transition:-webkit-transform 700ms ease;
 background-color:rgba(0,0,0,0.5);
 clear:both;
}
#box>div>div{
 width:200px;
 height:200px;
 background-color:rgba(255,255,255,0.5);
 float:left;
 line-height:200px;
 text-align:center;
 color:#000;
}

JavaScript

var bw=200,
    pw=0,
    x=0,
    max,min,
    panel=document.getElementById('box').firstChild,
    images='123456789'.split('');
    
function init(images){
 var a=0,b=images.length,d;pw=b*bw;max=pw-bw;min=0;
 for(;d=images[a];++a){panel.appendChild(document.createElement('div')).textContent=a;}
 panel.style.width=(pw)+'px';
}
function move(k){
 x=(x+=k=='>'?-bw:k=='<'?bw:0,x<min?min:x>max?max:x);
 panel.style.webkitTransform='translate3d(-'+x+'px,0,0)';
}
document.onkeyup=function(e){
 var k=e.keyCode;
 d=k==39?'>':k==37?'<':null;
 !d||move(d);
}
init(images);