JSFiddle - React, Tailwind, and code Playground

by Никита Егоров

HTML

<div id="slider">
	<img src="" id="one" style="position:absolute;transition:0.4s;">
	<img src="" id="two" style="position:absolute;transition:0.4s;">
</div>

<br><br><br><br><br><br><br>
<div>Это для того что бы понимать какой порядок картинок</div>
<div class="images"></div>

JavaScript

viewImages();

function viewImages(){
  let
    i = 0,
    one = document.getElementById("one"),
    two = document.getElementById("two"),
    timeout;

  let images = [
    'https://www.artmajeur.com/medias/profile_thumb/d/a/daniilgranin1999/profile/profile_ag4801.jpg#0',
    'https://teinon.net/ficbook/uploads/avatars/avatar_mrs_Axess_1480067710.png#1',
    'https://pp.userapi.com/c638725/v638725839/53e7d/DI0AN0l4KQ8.jpg#2',
    'https://i1.sndcdn.com/artworks-000148070469-smbtji-large.jpg#3'
  ];

  document.querySelector('.images').innerHTML = images.map(n => `<img src="${n}">`).join('');

  one.src = images[1];
  one.style.opacity = 1;

  two.src = images[0];
  two.style.opacity = 0;

  changeImg();

  function changeImg() {
      const elems = [ one, two ];
      if (+one.style.opacity) {
        elems.reverse();
      }

      elems[0].style.opacity = 1;
      elems[1].style.opacity = 0;
      setTimeout(() => elems[1].src = images[i], 600);

      i = (i + 1) % images.length;
      timeout = setTimeout(changeImg, 1000);
  }
}