Карточка карусели не может отображать более 3 предметовBootstrap 4.3.1

Question

Я строю эту карточную карусель в Bootstrap 4.3.1. На больших экранах он должен отображать более 3 элементов в каждом прогоне. Желательно отображать 5 или 6 карточек. На меньших экранах должна отображаться одна карта на слайд (этот бит работает хорошо).

Переменная itemsPerSlide в js должна контролировать количество элементов на слайды? Я настроил JavaScript на пару часов, но безрезультатно. Я также внес некоторые коррективы в .css, но все еще без моего предпочтительного результата.

Я не могу заставить его отображать более 3 карт на каждом слайде, и я полностью потерян здесь. Было бы здорово, если бы кто-то мог взглянуть на это. Вот ссылка на скрипку

Вот копия кода, который у меня есть на данный момент:

$('.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>