JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="marco">
      <div class="item" style="background-image: url(https://i.ytimg.com/vi/5UmFIcqYO9w/hqdefault.jpg)">
      
      </div>
      <div class="item" style="background-image: url(https://i.ytimg.com/vi/mi6Yb_HPS9A/hqdefault.jpg)">
      
      </div>
      <div class="item" style="background-image: url(https://i.ytimg.com/vi/0MyTHD24HKs/hqdefault.jpg)">
      
      </div>
      <div class="item" style="background-image: url(https://i.ytimg.com/vi/hQTsb64ZuFo/hqdefault.jpg)">
      
      </div>
    </div>

CSS

.item {
  position:absolute;
  width:100%;
  height:200px;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

JavaScript

$('.item:gt(0)').hide(); // esconder todos os items cujo index é maior que 0, só o primeiro fica visível
var countItems = $('.item').length; // num de .item que temos
var next;
var slide = setInterval(function() {
    next = $('.item:visible').index() + 1; // ver qual é o item que está visivél, saber o seu index e somar um, que vai ser o proximo .item a aparecer
    if(next >= countItems) { // caso o next seja maior ou igual do que o numero total de .item
    	next = 0; // o proximo .item a aparecer vai ser o primeiro, cujo index é 0
    }
    $('.item').fadeOut();
    $('.item:eq(' +next+ ')').fadeIn(); // aparecer o proximo .item, definido pela var next
}, 1500); // definir tempo entre cada slide