javascript запрос слайд-шоу фейдера

Question

Я хочу создать слайд-шоу, в котором слайды постепенно появляются и исчезают в качестве заголовка для сайта. Мне очень понравился пример, который я нашел здесь: https://www.the-art-of-web.com/css/fading-slideshow-no-jquery/, который казался элегантным способом достижения того, что я искал. Изображения сложены, css затухает верхнее, затем скрипт перемещает его в конец стопки.

Я реализовал это здесь: https://codepen.io/julie-thorpe/project/live/274355ef5f4204c792ade0810af6161c но это не работает должным образом, и я боюсь, что мое понимание javascript недостаточно хорошо, чтобы понять, почему. При запуске скрипт переносит и первое, и второе изображения вниз, а не только первое, поэтому слайд-шоу «перескакивает» на третье изображение вместо того, чтобы плавно переходить от второго к третьему. помощь с этим будет очень признательна!

   <header>

  <div id="stage">
  <a href="img/1.jpg"><img src="img/1.jpg" width="1200" height="250"></a>
  <a href="img/2.jpg"><img src="img/2.jpg" width="1200" height="250"></a>
  <a href="img/3.jpg"><img src="img/3.jpg" width="1200" height="250"></a>
  <a href="img/4.jpg"><img src="img/4.jpg" width="1200" height="250"></a>
  <a href="img/5.jpg"><img src="img/5.jpg" width="1200" height="250"></a>
  <a href="img/6.jpg"><img src="img/6.jpg" width="1200" height="250"></a>
  <a href="img/7.jpg"><img src="img/7.jpg" width="1200" height="250"></a>
  <a href="img/8.jpg"><img src="img/8.jpg" width="1200" height="250"></a>
  <a href="img/9.jpg"><img src="img/9.jpg" width="1200" height="250"></a>
  <a href="img/10.jpg"><img src="img/10.jpg" width="1200" height="250"></a>
  <a href="img/11.jpg"><img src="img/11.jpg" width="1200" height="250"></a>
  <a href="img/12.jpg"><img src="img/12.jpg" width="1200" height="250"></a>  
  </div>

    <style type="text/css">

    #stage {
    margin: 1em auto;
    width: 1200px;
    height: 250px;
  }

  #stage a {
    position: absolute;

  }

  #stage a img {
    background: #fff;
  }

  #stage a:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 3s;
    animation-duration: 3s;
    z-index: -10;
  }
  #stage a:nth-of-type(2) {
   z-index: -20;
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }

  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }
</style>

    window.addEventListener("DOMContentLoaded", function(e) 
  {
  var stage = document.getElementById("stage");
  var fadeComplete = function(e) { stage.appendChild(arr[0]); };
  
  var arr = stage.getElementsByTagName("a");
  
  for(var i=0; i < arr.length; i++){
    arr[i].addEventListener("animationend", fadeComplete, false);
  }

}, false);