JSFiddle - React, Tailwind, and code Playground

by Dadi Hall

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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">
               ...

CSS

@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...

JavaScript

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

    }
  }

});