JSFiddle - React, Tailwind, and code Playground

HTML

<div class="images" id="images">
  <ul class="imageList">
    <li class="imageContainer active" data-image="<%= i %>" id="main-img">
      <img src="http://placehold.it/350x150">
    </li>
    <li class="imageContainer below" data-image="<%= i %>">
      <img src="http://placehold.it/350x150">
    </li>
    <li class="imageContainer below" data-image="<%= i %>">
      <img src="http://placehold.it/350x150">
    </li>
  </ul>
</div>

CSS

html, body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
}

ul {
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}

.above {
  position: absolute;
  display: none;
  top: -200vh;
  transition: all 1.1s cubic-bezier(.49,0,.38,.97);
}

.active {
  position: absolute;
  display: list-item;
  top: 0;
  transition: all 1.1s cubic-bezier(.49,0,.38,.97);
}

.below {
  position: absolute;
  display: list-item;
  top: 200vh;
  transition: all 1.1s cubic-bezier(.49,0,.38,.97);
}

.images {
  position: relative;
}

.imageContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  padding-bottom: 100vh;
}

.imageContainer img {
  height: 81.5vh;
  width: auto;
}

#main-img img{
  width: 100%;
  height: auto;
}

JavaScript

var images = [].slice.call(document.getElementsByClassName("imageContainer"));
var prev = -1;
var active = 0;
var next = 1;

document.addEventListener("keydown", function (e) {
  var key = e.which || e.keyCode;
  if (next > 0 && next < images.length && (key === 40 || key === 32)) { //up arrow
    //move active image up
    images[active].className = "imageContainer above";
    // move next image up
    images[next].className = "imageContainer active";
    // change next image to active image
    active++;
    // line-up the next immage
    next++;
    // pile-up the last image
    prev++;
  } else if (next > 1 && next <= images.length && key === 38) { //down arrow
    //move active image down
    images[active].className = "imageContainer below";
    //move prev image down
    images[prev].className = "imageContainer active";
    //change prev image to active
    active--;
    //line up next image
    next--;
    //pile-up the last image
    prev--;
  }
  if (active == 0) {
    document.getElementById("titleBar").className = "titleBar-main";
  } else {
    document.getElementById("titleBar").className = "titleBar-up"
  }
});