Basic 3D Carousel In Pure JavaScript

This is a very basic 3D coverflow style carousel/rotator implemented in pure JavaScript and CSS/CSS3.

How to use it:

Place the core stylesheet in the head section of the html document.

<link rel="stylesheet" href="style.css">

Add items together with the text content next/prev arrows to the carousel.

<div class="container">
  <div class="button" onclick="shiftLeft()"><img src="https://image.ibb.co/mRsEb7/left_arrow.png" alt=""></div>
  <div class="cards-wrapper">
      <ul class="cards__container">
          <li class="box" style="background-color:red">box 1</li>
          <li class="box">box 2</li>
          <li class="box">box 3</li>
          <li class="box">box 4</li>
          <li class="box">box 5</li>
          <li class="box box--hide">box 6</li>
          <li class="box box--hide">box 7</li>
      </ul>
      <div class="card__text-content">
          <h3 class="card__title">The Famous Five</h3>
          <div class="card__summary">The Famous Five is a series of children's adventure novels written by English author Enid Blyton. The first book, Five on a Treasure Island, was published in 1942.</div>
      </div>
  </div>
  <div class="button" onclick="shiftRight()"><img src="https://image.ibb.co/dfPSw7/right_arrow.png" alt=""></div>
</div>

The JavaScript to enable the next/prev arrows to switch between items.

function shiftLeft() {
const boxes = document.querySelectorAll(".box");
const tmpNode = boxes[0];
boxes[0].className = "box move-out-from-left";
setTimeout(function() {
    if (boxes.length > 5) {
        tmpNode.classList.add("box--hide");
        boxes[5].className = "box move-to-position5-from-left";
    }
    boxes[1].className = "box move-to-position1-from-left";
    boxes[2].className = "box move-to-position2-from-left";
    boxes[3].className = "box move-to-position3-from-left";
    boxes[4].className = "box move-to-position4-from-left";
    boxes[0].remove();
    document.querySelector(".cards__container").appendChild(tmpNode);
}, 500);
}
function shiftRight() {
const boxes = document.querySelectorAll(".box");
boxes[4].className = "box move-out-from-right";
setTimeout(function() {
    const noOfCards = boxes.length;
    if (noOfCards > 4) {
        boxes[4].className = "box box--hide";
    }
    const tmpNode = boxes[noOfCards - 1];
    tmpNode.classList.remove("box--hide");
    boxes[noOfCards - 1].remove();
    let parentObj = document.querySelector(".cards__container");
    parentObj.insertBefore(tmpNode, parentObj.firstChild);
    tmpNode.className = "box move-to-position1-from-right";
    boxes[0].className = "box move-to-position2-from-right";
    boxes[1].className = "box move-to-position3-from-right";
    boxes[2].className = "box move-to-position4-from-right";
    boxes[3].className = "box move-to-position5-from-right";
}, 500);
}