卡轮播不能显示超过3个项目？？引导程序4.3.1

Question

我正在Bootstrap 4.3.1中构建此卡轮播。在较大的屏幕上，每次运行应显示3个以上的项目。最好显示5或6张卡片。在较小的屏幕上，每张幻灯片应显示一张卡片（该位运作良好）。

js中的itemsPerSlide变量应该控制每张幻灯片的项目数吗？我已经将JavaScript调整了几个小时，但没有结果。我也做了一些.css调整，但是仍然没有我想要的结果。

我无法使其在每张幻灯片中显示超过3张卡片，我在这里完全迷失了。如果有人可以看一下，那就太好了。 这是指向fiddle

的链接

这是我目前拥有的代码的副本：

$('.multi-item-carousel').on('slide.bs.carousel', function (e) {
  let $e = $(e.relatedTarget),
      itemsPerSlide = 5,
      totalItems = $('.carousel-item', this).length,
      $itemsContainer = $('.carousel-inner', this),
      it = itemsPerSlide - (totalItems - $e.index());

  if (it > 0) {
    for (var i = 0; i < it; i++) {
      $('.carousel-item', this).eq(e.direction == "left" ? i : 0).
        // append slides to the end/beginning
        appendTo($itemsContainer);

    }
  }

});

@media (min-width: 768px) {
  .multi-item-carousel .carousel-inner .carousel-item {
    margin-right: inherit;
  }
  .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item,
  .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item {
    display: block;
  }
  .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
  .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
    transition: none;
  }
  .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item + .carousel-item {
    position: absolute;
    top: 0;
    right: -33.33333333333333%;
    z-index: -1;
    display: block;
    visibility: visible;
  }
  .multi-item-carousel .carousel-inner .carousel-item-next,
  .multi-item-carousel .carousel-inner .carousel-item-prev {
    position: relative;
    transform: translate3d(0, 0, 0);
  }
  .multi-item-carousel .carousel-inner .carousel-item-prev.carousel-item-right {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    visibility: visible;
  }
  .multi-item-carousel .active.carousel-item-left + .carousel-item-next.carousel-item-left,
  .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item,
  .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
  .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  .multi-item-carousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
  .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item,
  .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
  .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(100%, 0, 0);
    display: block;
    visibility: visible;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div id="theCarousel" class="carousel slide multi-item-carousel w-100" data-ride="carousel" data-interval = "20000">
  <div class="carousel-inner row w-100 mx-auto">
        <div class="carousel-item active col-md-2">



                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=1">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=2">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=3">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=4">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=5">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=6">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=5">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=6">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=5">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=6">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=5">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=6">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=5">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=6">
                </div>

        </div>
    </div>
    <a class="carousel-control-prev w-auto" href="#theCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next w-auto" href="#theCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div> 
</div>