响应式旋转木马滑块有4个项目

Question

我正在尝试创建一个包含多个项目的响应式轮播滑块（示例4）。但是我无法显示4个项目。仅显示1个项目。我也创建了一个工作演示。这是

http://jsbin.com/yizepahoxa/1/edit?html,css,js,output（使用3.3 jquery版本更新）

我如何显示电子商务滑块（https://mobirise.com/bootstrap-carousel/multiple-items-carousel.html）中的4个项目？

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="carousel slide multi-item-carousel" id="theCarousel">
        <div class="carousel-inner">
          <div class="item active">
            <div class="col-xs-4 col-sm-12"><a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4 col-sm-12"><a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4 col-sm-12"><a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4 col-sm-12"><a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4 col-sm-12"><a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4 col-sm-12"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
          </div>
          <!-- add  more items here -->
          <!-- Example item start:  -->

          <div class="item">
            <div class="col-xs-4 col-sm-12"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
          </div>

          <!--  Example item end -->
        </div>
        <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
      </div>
    </div>
  </div>
</div>

CSS

.multi-item-carousel {
  .carousel-inner {
    > .item {
      transition: 500ms ease-in-out left;
    }
    .active {
      &.left {
        left: -33%;
      }
      &.right {
        left: 33%;
      }
    }
    .next {
      left: 33%;
    }
    .prev {
      left: -33%;
    }
    @media all and (transform-3d), (-webkit-transform-3d) {
      > .item {
        // use your favourite prefixer here
        transition: 500ms ease-in-out left;
        transition: 500ms ease-in-out all;
        backface-visibility: visible;
        transform: none !important;
      }
    }
  }
  .carouse-control {
    &.left,
    &.right {
      background-image: none;
    }
  }
}

// non-related styling:
body {
  background: #333;
  color: #ddd;
}
h1 {
  color: white;
  font-size: 2.25em;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 2em;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 1);
}

JS

// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
  interval: 3000
});

$('.multi-item-carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length>0) {
    next.next().children(':first-child').clone().appendTo($(this));
  } else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});

我使用了带有版本3.3.1的jquery和3.3.6的bootstrap的bootstrap轮播