<div class="container py-3">
  <div class="p-3 m-n3 overflow-hidden">
    <div id="carousel-multiple" class="carousel slide carousel-multiple" data-ride="carousel"
         data-maximum-items-per-slide="6">
      <div class="row position-relative">
        <div class="row carousel-inner mx-0">
          <div class="carousel-item col-sm-6 col-md-4 col-lg-3 col-xl-2 active">
            <div class="p-5 w-100 text-center bg-primary rounded shadow-sm display-1 text-light">
              1
            </div>
          </div>
          <div class="carousel-item col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="p-5 w-100 text-center bg-primary rounded shadow-sm display-1 text-light">
              2
            </div>
          </div>
          <div class="carousel-item col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="p-5 w-100 text-center bg-primary rounded shadow-sm display-1 text-light">
              3
            </div>
          </div>
          <div class="carousel-item col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="p-5 w-100 text-center bg-primary rounded shadow-sm display-1 text-light">
              4
            </div>
          </div>
          <div class="carousel-item col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="p-5 w-100 text-center bg-primary rounded shadow-sm display-1 text-light">
              5
            </div>
          </div>
          <div class="carousel-item col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="p-5 w-100 text-center bg-primary rounded shadow-sm display-1 text-light">
              6
            </div>
          </div>
          <div class="carousel-item col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="p-5 w-100 text-center bg-primary rounded shadow-sm display-1 text-light">
              7
            </div>
          </div>
          <div class="carousel-item col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="p-5 w-100 text-center bg-primary rounded shadow-sm display-1 text-light">
              8
            </div>
          </div>
        </div>
        <a class="carousel-control-prev w-auto px-5 px-xl-4" href="#carousel-multiple" 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 w-auto px-5 px-xl-4" href="#carousel-multiple" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</div>
<hr class="my-5">
<div class="container py-3">
  <h1 class="h4">What should you know about Bootstrap multiple carousel?</h1>
  <p>
    You should not use carousel if total items count is less than <em>data-maximum-items-per-slide + 2</em>. The
    functionality of carousel then breaks.
  </p>
  <p>I recommend to init carousel with javascript and make a condition to not load if items are less than
    <em>data-maximum-items-per-slide + 2</em>.</p>
</div>
@mixin bs-multiple-carousel-item-repeater($count) {
  $result-selector: "";

  //main loop
  @while $count > 0 {
    $result-selector: $result-selector + "+ .carousel-item";
    $count: $count - 1;

    //secondary loop
    $nested-count: $count;
    @while $nested-count > 0 {
      $result-selector: $result-selector + "+ .carousel-item";
      $nested-count: $nested-count - 1;
    }

    @if $count != 0 {
      $result-selector: $result-selector + ",";
    }
  }

  #{$result-selector} {
    @content;
  }
}

@mixin bs-multiple-carousel-item-nesting($count) {
  $result-selector: "";

  //main loop
  @while $count > 0 {
    $result-selector: $result-selector + "+ .carousel-item";
    $count: $count - 1;
  }

  #{$result-selector} {
    @content;
  }
}

@mixin bs-multiple-carousel($items-count: 2) {
  .carousel-item.active,
  .carousel-item-next,
  .carousel-item-prev {
    display: flex; //block
  }

  .carousel-inner {
    overflow: visible;

    .carousel-item {
      // NEW to v4.3.1: all margin-right properties come with -100% as default
      // causing all hidden items to be out of the screen
      margin-right: inherit;

      &.active {
        @include bs-multiple-carousel-item-repeater($items-count) {
          display: flex; //block // three visible items
        }

        // prevents opposite direction "animation"
        &:not(.carousel-item-right):not(.carousel-item-left) {
          transition: none;

          @include bs-multiple-carousel-item-repeater($items-count - 1) {
            transition: none;
          }
        }

        // allows new item to be visible in order to "slide in" into place
        @include bs-multiple-carousel-item-nesting($items-count) {
          position: absolute;
          top: 0;
          right: -(percentage(1 / $items-count));
          z-index: -1;
          display: flex; //block
          visibility: visible;
          height: 100%;
        }
      } // .active
      &-next,
      &-prev {
        position: relative;
        transform: translate3d(0, 0, 0);
      }
    } // .carousel-item

    // farthest right hidden item must be also positioned for animations
    .carousel-item-prev.carousel-item-right {
      position: absolute;
      top: 0;
      right: 100%;
      z-index: -1;
      display: flex; //block
      visibility: visible;
      height: 100%;
      transform: translate3d(100%, 0, 0);
    }
  } // .carousel-inner

  // left or forward direction
  .active.carousel-item-left + .carousel-item-next.carousel-item-left {
    position: relative;
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  .carousel-item-next.carousel-item-left {
    @include bs-multiple-carousel-item-repeater($items-count) {
      position: relative;
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
    }
  }

  // right or previous direction
  .active.carousel-item-right + .carousel-item-prev.carousel-item-right {
    position: relative;
    transform: translate3d(100%, 0, 0);
    display: flex; //block
    visibility: visible;
  }

  .carousel-item-prev.carousel-item-right {
    @include bs-multiple-carousel-item-repeater($items-count) {
      position: relative;
      transform: translate3d(100%, 0, 0);
      display: flex; //block
      visibility: visible;
    }
  }
}

.carousel-multiple {
  &::before {
    display: block;
    margin-bottom: 20px;

    font-size: 30px;
    content: "xs - default breakpoint";
  }

  @media (min-width: 576px) and (max-width: 767px) {
    &::before {
      content: "media-breakpoint-between(sm, sm)";
    }
    @include bs-multiple-carousel(2);
  }

  @media (min-width: 768px) and (max-width: 991px) {
    &::before {
      content: "media-breakpoint-between(md, md)";
    }
    @include bs-multiple-carousel(3);
  }

  @media (min-width: 992px) and (max-width: 1199px) {
    &::before {
      content: "media-breakpoint-between(lg, lg)";
    }
    @include bs-multiple-carousel(4);
  }

  @media (min-width: 1200px) {
    &::before {
      content: "media-breakpoint-up(xl)";
    }
    @include bs-multiple-carousel(6);
  }
}
View Compiled
$(function () {
  $("#carousel-multiple").on("slide.bs.carousel", function (e) {
    var itemsPerSlide = parseInt($(this).attr('data-maximum-items-per-slide')),
      totalItems = $(".carousel-item", this).length,
      reserve = 1,//do not change
      $itemsContainer = $(".carousel-inner", this),
      it = (itemsPerSlide + reserve) - (totalItems - e.to);

    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);
      }
    }
  });
});

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js