JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
	<div class="slide">
    
    	<div class="image1"></div>
        <div class="image2"></div>
        
    </div>
    
</div>

CSS

* {
	margin:0;
	padding:0;
	outline:none;	
}

#container {
	width:100%;
	height:450px;
	overflow:hidden;
	margin:20px auto;
	position:relative;	
}
.slide {
	position:absolute;
	height:450px;	
	float:left;
	display:block;
	width:100%;
}

.slide .image1, .slide .image2 { top:0;left:0; overflow:hidden; width:400px; height:450px; position:absolute;opacity:0;background-size:cover;}
.slide .image1 {
	z-index:1;	
	background:red;
	
}
.slide .image2 {
	z-index:2;	
	background:green;
}

JavaScript

var wWidth = $(window).innerWidth(),
    count = $('.slide').length;

$('body *').css('width',wWidth);
$('.slide div').each(function(ind,el) {
    $(el).css({
        'left': (wWidth*(ind+1))
    });
});


function startAnimation() {
    $(".slide div.image2" )
        .animate({left: wWidth/4,opacity:1},1800)
        .animate({left: -wWidth,opacity:0}, 1000);
    $( ".slide div.image1" )
        .animate( {left:0,opacity:1 }, 1800)
        .delay(500)
        .animate({left:-wWidth,opacity:0}, 1000);
}
startAnimation();