如何修复此引导响应式多图像轮播。向左滑动有效，但向右滑动无效

Question

我正在尝试基于引导程序创建轮播。默认轮播仅显示一张图片。我需要根据屏幕宽度显示更多内容。通过大部分更改样式，我成功显示了4张图像，并且向左滑动（单击>）效果很好。仅向右滑动不会！

我在互联网上尝试了各种示例，但它们均基于较旧版本的Bootstrap。我当前的代码基于https://www.codeply.com/go/sShh7372V1。

我在Codepen上的代码：https://codepen.io/PRoescher/pen/oRZOVX

我的HTML

<div class="container">
  <div id="carouselExample" class="multi-slide-carousel carousel slide" data-interval="false">
    <div class="carousel-inner row w-100 mx-auto">
      <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3 active">
        <figure class="border border-secondary">
          <img class="img-fluid mx-auto d-block" src="//placehold.it/304x166?text=1" alt="slide 1">
          <figcaption class="text-center">1</figcation>
        </figure>
      </div>
      <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
        <figure class="border border-secondary">
        <img class="img-fluid mx-auto d-block" src="//placehold.it/199x254&text=2" alt="slide 2"/>     
          <figcaption class="text-center">2</figcation>
        </figure>
      </div>
      <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
        <figure class="border border-secondary">
        <img class="img-fluid mx-auto d-block" src="//placehold.it/300x365&text=3" alt="slide 3" />
          <figcaption class="text-center">3</figcation>
        </figure>
      </div>
      <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
        <figure class="border border-secondary">
        <img class="img-fluid mx-auto d-block" src="//placehold.it/118x158&text=4" alt="slide 4" />
          <figcaption class="text-center">4</figcation>
        </figure>
      </div>
      <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
        <figure class="border border-secondary">
        <img class="img-fluid mx-auto d-block" src="//placehold.it/30x40&text=5" alt="slide 5" />
          <figcaption class="text-center">5</figcation>
        </figure>
      </div>
      <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
        <figure class="border border-secondary">
        <img class="img-fluid mx-auto d-block" src="//placehold.it/300x400&text=6" alt="slide 6" />
          <figcaption class="text-center">6</figcation>
        </figure>
      </div>
      <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
        <figure class="border border-secondary">
        <img class="img-fluid mx-auto d-block" src="//placehold.it/300x400&text=7" alt="slide 7" />
          <figcaption class="text-center">7</figcation>
        </figure>
      </div>
      <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
        <figure class="border border-secondary">
        <img class="img-fluid mx-auto d-block" src="//placehold.it/300x400&text=8" alt="slide 8" />
          <figcaption class="text-center">8</figcation>
        </figure>
      </div>
    </div>
        <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            <i class="fa fa-chevron-left fa-lg text-muted"></i>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
            <i class="fa fa-chevron-right fa-lg text-muted"></i>
            <span class="sr-only">Next</span>
        </a>
  </div>
</div>

我当前的CSS：

.carousel-item figure img {
  max-height: 150px;
}


@media (min-width: 576px) {
    .multi-slide-carousel {
        .carousel-inner {
            .carousel-item {
                margin: 0;
                float: none;
                -webkit-box-align: center;
                align-items: center;
                transition-timing-function: ease, ease;
            }
            //display 1st & 2nd item
            .active,
            .active + .carousel-item {
                display: block;
            }
            //remove transactions for interacting items showing
            .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
            .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
                transition: none;
            }

            .carousel-item-next,
            .carousel-item-prev {
                position: relative;
                transform: translate3d(0, 0, 0);
            }
            //preparing 3rd item
            .active.carousel-item + .carousel-item + .carousel-item {
                position: absolute;
                top: 0;
                right: -50%;
                z-index: -1;
                display: block;
                visibility: visible;
            }

            .active + .carousel-item-left + .carousel-item {
                z-index: auto !important;
            }
            /* left or forward direction */
            .active.carousel-item-left + .carousel-item-next.carousel-item-left,
            .carousel-item-next.carousel-item-left + .carousel-item,
            .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
                position: relative;
                transform: translate3d(-100%, 0, 0);
                visibility: visible;
            }
            /* farthest right hidden item must be also position for animations */
            .carousel-item-prev.carousel-item-right {
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                display: block;
                visibility: visible;
            }
            /* right or prev direction */
            .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
            .carousel-item-prev.carousel-item-right + .carousel-item,
            .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
                position: relative;
                transform: translate3d(100%, 0, 0);
                visibility: visible;
                display: block;
            }
        }
    }
}

@media (min-width: 768px) {
    .multi-slide-carousel {
        .carousel-inner {

            .active + .carousel-item + .carousel-item {
                display: block;
            }
            //undo preparing 3rd item
            .active.carousel-item + .carousel-item + .carousel-item {
                position: relative;
                top: 0;
                right: 0;
                z-index: auto;
                display: block;
                visibility: visible;
            }
            //preparing 4th item
            .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
                position: absolute;
                top: 0;
                right: -33.3%;
                z-index: -1;
                display: block;
                visibility: visible;
            }

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

            .carousel-item.active:not(.carsouel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
                transition: none;
            }

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

            .active + .carousel-item-left + .carousel-item + .carousel-item {
                z-index: auto !important;
            }
        }
    }
}

@media (min-width: 992px) {

    .multi-slide-carousel {
        .carousel-inner {
            .active + .carousel-item + .carousel-item + .carousel-item {
                display: block;
            }
            //undo preparing 4th item
            .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
                position: relative;
                top: 0;
                right: 0;
                z-index: auto;
                display: block;
                visibility: visible;
            }
            //preparing 5th item
            .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
                position: absolute;
                top: 0;
                right: -25%;
                z-index: -1;
                display: block;
                visibility: visible;
            }

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

            .carousel-item.active:not(.carsouel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
                transition: none;
            }

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

            .active + .carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
                z-index: auto !important;
            }
        }
    }
}

一些JavaScript

        $(".multi-slide-carousel").on('slide.bs.carousel', function (e: ICarouselEvent) {
            var $e = $(e.relatedTarget);
            var idx = $e.index();
            var itemsPerSlide = this.getItemsToShow();
            var totalItems = $('.carousel-item').length;

            if (idx >= totalItems - (itemsPerSlide - 1)) {
                var it = itemsPerSlide - (totalItems - idx);
                for (var i = 0; i < it; i++) {
                    // append slides to end
                    if (e.direction === "left") {
                        $('.carousel-item').eq(i).appendTo('.carousel-inner');
                    }
                    else {
                        $('.carousel-item').eq(0).appendTo('.carousel-inner');
                    }
                }
            }

        }