Bootstrap 3 Carousel: set unidirectional (vertical) transition

I am working on a Bootstrap 3 carousel with a vertical transition (and no arrows). It works, but I am looking for a particular transition.

.carousel.vertical {
  position: relative;
}

.carousel.vertical .carousel-inner {
  height: 100%;
  width: auto;
}

.carousel.vertical .carousel-inner>.item {
  width: auto;
  transition: 0.6s ease-in-out top;
}

.carousel.vertical .carousel-inner>.item {
  transition: 0.6s ease-in-out;
}

.carousel.vertical .carousel-inner>.item.next,
.carousel.vertical .carousel-inner>.item.active.right {
  transform: translate3d(0, 100%, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.item.prev,
.carousel.vertical .carousel-inner>.item.active.left {
  transform: translate3d(0, -100%, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.item.next.left,
.carousel.vertical .carousel-inner>.item.prev.right,
.carousel.vertical .carousel-inner>.item.active {
  transform: translate3d(0, 0, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.active,
.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev {
  display: block;
}

.carousel.vertical .carousel-inner>.active {
  top: 0;
}

.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev {
  position: absolute;
  top: 0;
  width: 100%;
}

.carousel.vertical .carousel-inner>.next {
  top: 100%;
}

.carousel.vertical .carousel-inner>.prev {
  top: -100%;
}

.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.prev.right {
  top: 0;
}

.carousel.vertical .carousel-inner>.active.left {
  top: -100%;
}

.carousel.vertical .carousel-inner>.active.right {
  top: 100%;
}

.carousel.vertical .carousel-indicators {
  display: inline-block;
  width: auto;
  padding: 0;
  margin: 0;
  left: auto;
  right: 10px;
  bottom: 2px;
  z-index: 9;
  font-size: 0;
}

.carousel.vertical .carousel-indicators li {
  border: none;
  cursor: pointer;
  display: inline-block;
  width: 18px;
  height: 18px;
  text-indent: -9999px;
  background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
}

.carousel.vertical .carousel-indicators li.active {
  background-position: -528px -524px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://picsum.photos/1200/300/?gravity=east" alt="">
      </div>

      <div class="item">
        <img src="https://picsum.photos/1200/300/?gravity=south" alt="">
      </div>

      <div class="item">
        <img src="https://picsum.photos/1200/300/?gravity=west" alt="">
      </div>
    </div>

    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
  </div>
</div>

There is a jsFiddle with it too.

I want the carousel transition direction to be upwards, regardless of the succession of the indicators clicked.

In other words: if the active indicator (and the corresponding slide) is the third one and the user clicks the second or first one, the transition direction should be upwards, just as if the active indicator was the first and she/he was clicking the second or third indicator.

What is missing?

from Bootstrap 3 Carousel: set unidirectional (vertical) transition