JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <ul>
        <li class="active"><img src="http://viajar.elperiodico.com/var/viajar/storage/images/media/imagenes-y-videos/cala-pregonda-es-una-de-las-playas-virgenes-y-protegidas-de-menorca/781688-1-esl-ES/cala-pregonda-es-una-de-las-playas-virgenes-y-protegidas-de-menorca_galeria_principal_size2.jpg" /></li>
        <li><img src="http://www.diariothc.com/wp-content/uploads/2010/08/paisaje-maritimo.jpg" /></li>
    </ul>
    <form>
        ***
    </form>
</div>

CSS

.main { float:left; position:relative; width:100%; }
.main ul { margin: 0; padding:0; float:left; width:100%; position:absolute; list-style-type:none; }
.main ul li { float:left; width:100%; display:none; }
.main ul li.active { display:block; }
.main ul li img { width:100%; height:auto; }
.main form { background-color:yellow; float:left; position:absolute; top:calc(50% - 40px); left:calc(50% - 40px); padding: 20px; border:1px solid; }

JavaScript

function img_change(){
    var active_index = $('.main li.active').index();
    ++active_index;
    if(active_index > ($('.main li').length - 1)) active_index = 0;
    $('.main li.active').removeClass('active');
    $('.main li').eq(active_index).addClass('active').css('opacity',0).animate({ opacity:1 }, 500);
}

$(function(){
    $('.main').height($('.main ul li').height());
    setInterval(function(){ img_change() },2000);
});