JSFiddle - React, Tailwind, and code Playground

HTML

<section id="fader">
				<img src="http://s017.radikal.ru/i420/1510/44/b9205836b685.jpg" alt="Image One">
 				<img src="http://s008.radikal.ru/i303/1510/47/7bf48e57196b.jpg" alt="Image Two">
 				<div class="left-arrow"></div>
 				<div class="right-arrow"></div>
			</section>

CSS

#fader {
 position: relative;
 width:100%;
 max-width: 980px;
 margin: 0 auto;
}

#fader img {
 position: absolute;
 top: 0;
 left: 0;
 max-width: 100%;
 height: auto;
 border-radius:5px;
}
.left-arrow
{
position:absolute;
left:0;
height:200px;
width:7%;
background:rgba(0, 0, 0, 0.2);
background-image:url(http://s017.radikal.ru/i430/1510/18/b50e880922eb.png);
background-repeat:no-repeat;
background-position:center;
cursor:pointer;
z-index:999;
}
.right-arrow
{
position:absolute;
right:0;
height:200px;
width:7%;
background:rgba(0, 0, 0, 0.2);
background-image:url(http://s017.radikal.ru/i444/1510/a7/9bf940f4c6eb.png);
background-repeat:no-repeat;
background-position:center;
cursor:pointer;
z-index:999;
}

JavaScript

jQuery('#fader img:gt(0)').hide();

setInterval(function(){
 jQuery('#fader :first-child')
 .fadeTo(500, 0)
 .next('img')
 .fadeTo(500, 1)
 .end()
 .appendTo('#fader');
}, 2500);