JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

html,body{width:100%;height:100%;margin:0;padding:0;}
#box{
 width:100%;
 height:100%;
 overflow:hidden;
}
#box>div{
 height:100%;
 -webkit-transition:-webkit-transform 700ms ease;
 clear:both;
}
#box>div>div{
 height:100%;
 float:left;

 text-align:center;
 color:#fff;
 font-size:24px;
}

JavaScript

var bw,
    bh,
    pw,
    x=0,
    min,
    max,
    panel=document.getElementById('box').firstChild,
    images='123456789'.split('');
function init(images){
 var a=0,b=images.length,d;
 bw=panel.parentNode.offsetWidth;
 bh=panel.parentNode.offsetHeight;
 pw=b*bw;
 max=pw-bw;
 min=0;
 for(;d=images[a];++a){
  var bx=document.createElement('div');
  bx.style.width=bw+'px';
  bx.style.lineHeight=bh+'px';
  bx.style.backgroundColor='hsla('+(360/b*a)+',100%,80%,1)';
  panel.appendChild(bx).textContent=a+1
 }
 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);