引导轮播不会显示应有的状态

Question

我的轮播没有显示在页面上，而是显示了两个轮播：一个垂直和一个水平，而不是仅水平显示...有人知道这是怎么回事吗？这是我使用的示例：

https://www.codeply.com/go/3EQkUOhhZz

感谢您的帮助。

以下是HTML：

 <div class="container text-center my-3">
  <div class="row mx-auto my-auto">
      <div id="recipeCarousel" class="carousel-2 slide w-100" data-ride="carousel-2">
          <div class="carousel-inner-2 w-100" role="listbox">
              <div class="carousel-item-2 active">
                  <img class="d-block col-3 img-fluid" src="http://placehold.it/350x180?text=1">
              </div>
              <div class="carousel-item-2">
                  <img class="d-block col-3 img-fluid" src="http://placehold.it/350x180?text=2">
              </div>
              <div class="carousel-item-2">
                  <img class="d-block col-3 img-fluid" src="http://placehold.it/350x180?text=3">
              </div>
              <div class="carousel-item-2">
                  <img class="d-block col-3 img-fluid" src="http://placehold.it/350x180?text=4">
              </div>
              <div class="carousel-item-2">
                  <img class="d-block col-3 img-fluid" src="http://placehold.it/350x180?text=5">
              </div>
              <div class="carousel-item-2">
                  <img class="d-block col-3 img-fluid" src="http://placehold.it/350x180?text=6">
              </div>
          </div>
          <a class="carousel-control-prev" href="#recipeCarousel" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#recipeCarousel" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
          </a>
      </div>
  </div>

这是应用的CSS：

.carousel-inner-2 .carousel-item-2.active,
.carousel-inner-2 .carousel-item-2-next,
.carousel-inner-2 .carousel-item-2-prev {
 display: flex;
 }

.carousel-inner-2 .carousel-item-2-right.active,
.carousel-inner-2 .carousel-item-2-next {
 transform: translateX(33,33%);
 }

 .carousel-inner-2 .carousel-item-2-left.active,
 .carousel-inner-2 .carousel-item-2-prev {
 transform: translateX(-33,33%);
 }

 .carousel-inner-2 .carousel-item-2-right,
 .carousel-inner-2 .carousel-item-2-left{
  transform: translateX(0);
  }

最后这是JS函数：

$('#recipeCarousel').carousel({
interval: 10000
})

$('.carousel-2 .carousel-item-2').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));

    for (var i=0;i<2;i++) {
    next=next.next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));
  }
  });