Bootstrap 4 Carousel 4列，每次滑动1个项目

Question

你好，有人可以帮助我 我希望在boostrap 3上实现这个项目 https://www.bootply.com/132400

并在bootstrap 4中取得进展 https://codepen.io/jakaprima/pen/gGmjZG

有2层图层要显示活动而图层将离开。 我想问的是如何使图层想要从右向左离开

.col-md-3{
  float: left
}

/* paket active: active */
.carousel-inner .active {
    left: 0;
}

/* paket lama: yang akan hilang */
.carousel-inner>.carousel-item {
    position: relative;
    -webkit-transition: .6s ease-in-out left;
    transition: 1s ease-in-out left;
}

/* paket lama: display block */
.carousel-inner>.active,
.carousel-inner>.carousel-item-next,
.carousel-inner>.carousel-item-prev{
    display: block;
}

/* paket lama:  */
.carousel-inner .active.carousel-item-left { 
   left: 90%;
}


/* saat tidak active & akan hilang paling kiri saat datang yang baru */
.carousel-inner.carousel-item {
  display: none;
  position: relative;
}


/* paket baru: posisi tujuan saat sedang event */
.carousel-inner>.carousel-item-next.carousel-item-left, 
.carousel-inner>.carousel-item-prev.carousel-item-right {
  left: -25%;
}



/* paket baru: posisi awal event saat sedang event kotak yang mau tampil */
.carousel-inner>.carousel-item-next{ 
  left:  40%; 
}

/* paket baru: posisi awal event saat sedang event kotak yang mau tampil */
.carousel-inner>.carousel-item-prev{ 
  left: -25%;
}



/* paket baru: */
.carousel-inner .carousel-item-next        { 
  left:  25%; 
}

/* paket baru */
.carousel-inner .carousel-item-prev      { 
  left: -25%; 
}

/* paket baru: hasil akhir */
.carousel-inner>.carousel-item-next.carousel-item-left, 
.carousel-inner>.carousel-item-prev.carousel-item-right {
    left: 0;
}

/* paket baru:  */
.carousel-inner>.carousel-item-next, 
.carousel-inner>.carousel-item-prev {
    position: absolute;
    top: 0;
    width: 100%;
}

/* paket baru:  */
.carousel-inner>.active, .carousel-inner>.carousel-item-next, .carousel-inner>.carousel-item-prev {
    display: block;
}