JSFiddle - React, Tailwind, and code Playground

HTML

<div class="banner-containner">
  <div class="banner-wrapper">
    <img src="http://placehold.it/200x300?text=Banner One">
    <img src="http://placehold.it/200x60?text=Banner Base">
  </div>
  <div class="banner-wrapper">
    <img src="http://placehold.it/200x300?text=Banner Two">
  </div>
</div>

CSS

.banner-containner {
  max-width: 200px;
  height: auto;
 float:left;
  border: 1px solid #f00;
}
.banner-wrapper {
  float:left;
  width: 100%;
  height: auto;
  
}
.xbanner-wrapper img {
  position: relative;
  width: 100%;
  float: left;
}

.banner-wrapper:last-child {
  display:none;
}

JavaScript

var $container = $('.banner-containner');
var $bannerWrappers = $container.find('.banner-wrapper');

var idx = 0;
setInterval(function() {
	if(idx === $bannerWrappers.length) {
  	idx = 0;
  }
  $bannerWrappers.hide().eq(idx).toggle();
  idx++;
}, 5000);	// 5seconds