JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <img src="https://picsum.photos/200" id="img_1" hidden />
  <img src="https://picsum.photos/200" id="img_2" />
  <img src="https://picsum.photos/200" id="img_3" hidden/>
  <img src="https://picsum.photos/200" id="img_4" hidden/>
  <img src="https://picsum.photos/200" id="img_5" hidden/>

</div>

JavaScript

i1 = document.getElementById('img_1');
i2 = document.getElementById('img_2');
i3 = document.getElementById('img_3');
i4 = document.getElementById('img_4');
i5 = document.getElementById('img_5');

let myarr = [i1, i2, i3, i4, i5];
let active = 1;

setInterval(() => {
  $(myarr[active - 1]).fadeOut(500)
  if (active >= myarr.length) {
    active = 0
  }
  setTimeout(() => {
    $(myarr[active]).fadeIn(500);
    active = active + 1;
  }, 500)
}, 5000)