JSFiddle - React, Tailwind, and code Playground

HTML

<div class="background-image">
    <img src="http://lorempixel.com/400/200/sports" rel="1" width="400" height="200">
    <img src="http://lorempixel.com/400/200/animals" rel="2" width="400" height="200">
    <img src="http://lorempixel.com/400/200/city" rel="3" width="400" height="200">
</div>
<div class="next"></div>

CSS

.background-image {
    position: relative;
}
.background-image img {
    position: absolute;
    top: 0px;
    left: 0px;
}
.next {
    cursor: pointer;
    position: absolute;
    top: 200px;
    width: 50px;
    height: 50px;
    background-color: #000;
}

JavaScript

var ch = $('.background-image').children();
ch.not(':eq(0)').hide();
var i = 0;

setInterval((function () {
    anim();
    return arguments.callee;  
})(), 4000);

function anim(){  
  ch.stop().delay(5000).fadeTo(3000,0).eq(++i % ch.length).fadeTo(2000,1);
};

$('.next').click(function () {
   ch.stop(true, false).fadeTo(0,0).eq(++i % ch.length).fadeTo(2000,1);
});