JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div id="img-slider">
<div id="imgL"><img src="http://www.menucool.com/slider/prod/image-slider-4.jpg" /></div><div id="imgM"><img src="http://www.poyraz.gen.tr/wp-content/uploads/images_4781_1.jpg" /></div><div id="imgR"><img src="http://blogs.mathworks.com/pick/files/zebrainpastelfield.png" /></div>
</div>
</div>
CSS
#container{width:600px;height:200px;border:2px solid
#333;overflow:hidden;}
#img-slider{height:100%;width:200%;}
#container img{display:inline-block;height:200px;}
#imgL, #imgM, #imgR{height:100%;display:inline-block;}
#imgL, #imgR{width:200px;background-color:#afa;}
#imgM{width:400px;background-color:#faa;}
#img-slider img{width:100%;}
JavaScript
//store images in an array
var image =['http://www.menucool.com/slider/prod/image-slider-4.jpg',
'http://blogs.mathworks.com/pick/files/zebrainpastelfield.png',
'http://www.freewarepocketpc.net/wp7/img/image-effecter-free.png',
'http://www.poyraz.gen.tr/wp-content/uploads/images_4781_1.jpg'
],
imgWidth = $('#imgL').width(),//width of side images
TIMEOUT = 3000,//3 second timer
//initialise timer
timer = window.setInterval(nextImg,TIMEOUT),
//init slide amount, direction, and maximum slide length
slide = imgWidth,
dir = "-",
swap = "L", //used to swap L - left, or R - right image
imgN = 0; //img to display on left or right
//slide the images across
function nextImg(){
$('#img-slider').animate({
'margin-left' : dir + slide + 'px' //direction + image width + px
}, 1000, 'swing',function(){swapImg();});//call swapImg on animation complete
if(dir == '-'){//change direction,
dir = '', slide = 0;swap = "L";
//we have just moved the right image into view, so change the left img
}//otherwise keep the direction
else{dir='-';slide=imgWidth;swap="R"
}//end cahnge direction
//update image number to display
imgN <=image.length ? imgN++ : imgN =0;
}//end nextImg
function swapImg(){
if(swap == "L"){
//change left image
$('#imgL img').attr('src',image[imgN]);
}
else{
//change right image
$('#imgR img').attr('src',image[imgN]);
}
}//end swapImg