JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-image">
    <div id="rotator">
    <img src="http://i1336.photobucket.com/albums/o660/Terre52/PuttPuttcourseontheship.jpg" border="0" alt=""/>
    <img src="http://i1248.photobucket.com/albums/hh488/shealsjohnson2/6542%20E%20Edna%20Mills%20Dr/P1360882_zps83f93359.jpg" border="0" alt="" /> 
    <img src="http://i52.photobucket.com/albums/g28/bmp2000/Golf-Course---Beautiful.jpg" border="0" alt="" />
    </div>
</div>

<div id="body-content">fluu</div>

CSS

#main-image {
	width: 100%;
	border: 1px solid blue;
	}
#main-image IMG.active {
    z-index:10;
	}
#main-image IMG.last-active {
    z-index:9;
	}
#rotator {
	width: 100%;
	height: auto;
	position:relative;
	}
#rotator img{
	position: absolute;    
	width: 100%;
	border: 1px solid red;
	}
#body-content {
	margin-top: 15px;
	height: 50px;
	border: 1px solid red;
	width: 100%;
	}

JavaScript

function slideSwitch() {
    var $active = $('#main-image IMG.active');
    if ( $active.length == 0 ) $active = $('#main-image IMG:last');
    var $next =  $active.next().length ? $active.next()
        : $('#main-image IMG:first');
    $active.addClass('last-active');
        
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
    setMainHeight()
}
function setMainHeight() {
    $('#main-image').height($('#rotator img:first').height());
}
setMainHeight();
$(window).on('resize', function(){
    setMainHeight();
});

setInterval(slideSwitch, 2000);