JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slide" class="slide"></div><button><</button><button>></button><div id="prev"></div><div id="slideinfo"></div>

CSS

.slide{
margin-left:256px;
 clear:both;
 width:64px;
 height:64px;
 /*overflow:hidden;*/
 background-color:green;
 -webkit-transform-style:preserve-3d;
}
.slide>div{
 float:left;
 margin-left:-100%;
 width:100%;
 height:100%;
 background-color:hsla(0,0%,0%,.2);
 background-repeat:no-repeat;
 background-position:50% 50%;
 background-size:contain;
-webkit-transition:-webkit-transform 200ms ease 0ms;
    background-color:white;
    -webkit-
}
.slide>div:nth-child(1){
 margin-left:0%;
}
#prev>img{max-height:64px;}

JavaScript

var basek='http://placekitten.com/',
    I=(basek+['200/100','510/320','820/800','230/900','540/500','850/800','260/900','170/500','880/800','290/900','170/200','580/700','290/600'].join(','+basek)).split(','),
    nI=I.length, // total images
    nP=2, // prelaod boxes per side
    nB=nP*2+1, // total preload boxes
    nC=0, // current center image index
    slideWidth=200, // container width
    d, // direction
    matrix=[]
function calc(a,b){//[75, 76, 0, 1, 2]
 x=matrix[0]&&matrix[0][0]||(matrix[0]=[],matrix[0][0]==0,0);
 for(a=[],b=0;b<nB;b++){
  var i=(b+nC-nP+nI)%nI;
  var tmp=matrix[b]&&matrix[b][1]||0;
  matrix[b]=[(x+(d==0?-1:d==1?1:0)+b+nB)%nB,i,(b-nP)*slideWidth];//+nB)%nB;
  url=slide.childNodes[matrix[b][0]].style.backgroundImage;
     z=url=='url('+I[matrix[b][1]]+')'?1:(slide.childNodes[matrix[b][0]].style.backgroundImage='url('+I[matrix[b][1]]+')',-1);
  slide.childNodes[matrix[b][0]].style.webkitTransform='translate3d('+matrix[b][2]+'px'+',0,'+(nP-Math.abs(nP-b))+'px) scale('+((nP+1)-(Math.abs(nP-b)))/(nP+1)+')';
 }
 slideinfo.innerHTML='<div>'+JSON.stringify(matrix,null,' ')+'</div>'+nC;
 return a
}
function next(e){
 nC=++nC%nI;
 d=1; // direction 
 calc()
}
function prev(e){
 nC=(--nC+nI)%nI;
 d=0;
 calc()
}
function pos2array(a,b){
 for(a=[],b=0;b<nB;b++){
  a[b]=I[(b+nC-nP+nI)%nI];
 }
 return a
}
 var slide=document.getElementById('slide');
    slideWidth=slide.offsetWidth;
 slide.innerHTML='<div style="background-image:url('+pos2array().join(');"></div><div style="background-image:url(')+');"></div>';//imgs.slice(0,bl)
 document.getElementById('prev').innerHTML='<img src="'+I.join('"><img src="')+'">';
 var boxes=slide.childNodes;

 var btns=document.getElementsByTagName('button');
     btns[0].addEventListener('click',next,false);
     btns[1].addEventListener('click',prev,false);
calc();