JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div id="carouselExampleControls" class="carousel vert slide vertical" data-ride="carousel" data-interval="900">
       <ol class="carousel-indicators">
           <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
           <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
           <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
       </ol>
       <div class="carousel-inner">
           <div class="carousel-item active">
               <img class="d-block mx-auto img-fluid" src="image/4.png" alt="First slide">
           </div>
           <div class="carousel-item">
               <img class="d-block mx-auto img-fluid" src="image/3.png" alt="Second slide">
           </div>
           <div class="carousel-item">
               <img class="d-block mx-auto img-fluid" src="image/2.png" alt="Third slide">
           </div>
       </div>
   </div>

CSS

.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            position: relative;
    /* new styles */
    display: none;
    -webkit-transition: 3.6s ease-in-out left;
    -moz-transition: 3.6s ease-in-out left;
    -o-transition: 3.6s ease-in-out left;
    transition: 3.6s ease-in-out left;
}

.vert .carousel-item-next,