Javascript 引导多项目旋转木马没有响应

我有一个多项目旋转木马，在更宽的屏幕上显示6个项目，但在更小的屏幕上继续显示6个项目。它只是将它们堆叠在一起，并与其他内容重叠。我想在小屏幕上显示4个项目，然后在超小屏幕上显示2个项目。我已经修改了这个代码笔的代码：，我发现这个响应性更强的代码笔（）有4个条目，但是，当我尝试将代码更改为它时，它根本不显示

这是旋转木马的html

<div class="container" style="background-color:white; height:140px; padding-top:15px">
    <div class="row">
        <div class="col-xs-11 col-md-12 col-centered">
                    <div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="3500" id="myCarousel">
                        <div class="carousel-inner">
                            <div class="item active">
                                <div class="col-md-2 col-sm-3 col-xs-6">
                                    <div>
                                        <a href="{% url 'category-2' category2='arsenal' %}">
                                            <img src="{% static 'logo/arsenal_city_logo.png' %}" class="img-responsive" style="max-width:100px; max-height:110px">
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-md-2 col-sm-3 col-xs-6">
                                    <a href="{% url 'category-2' category2='man_united' %}">
                                        <img src="{% static 'logo/manchester_united_fc_logo.png' %}" class="img-responsive" style="max-width:100px; max-height:110px">
                                    </a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-md-2 col-sm-3 col-xs-6">
                                    <a href="{% url 'category-2' category2='fcb' %}">
                                        <img src="{% static 'logo/barcelona_logo.png' %}" class="img-responsive" style="max-width:100px; max-height:110px">
                                    </a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-md-2 col-sm-3 col-xs-6">
                                    <a href="{% url 'category-2' category2='chelsea' %}">
                                        <img src="{% static 'logo/chelsea_logo.png' %}" class="img-responsive" style="max-width:100px; max-height:110px">
                                    </a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-md-2 col-sm-3 col-xs-6">
                                    <a href="{% url 'category-2' category2='everton' %}">
                                        <img src="{% static 'logo/everton_fc_logo.png' %}" class="img-responsive" style="max-width:100px; max-height:110px">
                                    </a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-md-2 col-sm-3 col-xs-6">
                                    <a href="{% url 'category-2' category2='liverpool' %}">
                                        <img src="{% static 'logo/liverpool_fc_logo.png' %}" class="img-responsive" style="max-width:100px; max-height:110px">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                        <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
                    </div>
        </div>
    </div>
</div>

JS:

$（'.carousel[data type=“multi”].item'）。每个（函数（）{
var next=$（this.next（）；
如果（！next.length）{
next=$（this.sibbines（':first'）；
}
next.children（':first child'）.clone（）.appendTo（$（this））；
对于（var i=0；i结果是我以错误的顺序导入了脚本，这就是为什么响应代码笔在我的环境中不起作用的原因
您可以将其作为一个片段提供并简化一点吗？那里有很多代码，像href和image src之类的东西在您的环境之外是不起作用的。我设法做到了修复此问题。结果表明，我以错误的顺序导入响应代码笔的脚本。为了将来参考，我应该发布什么而不是整个代码块？编辑：我发布了解决方案，但我不能接受它作为答案。我做错了什么？您可以发布代码段。您可以在所见即所得中找到“代码段”按钮创建问题时出现的编辑器（它是相反的V形按钮）。同时尝试简化代码以删除不会导致问题的内容。（例如，不工作的HREF）显然要确保代码片段仍然复制问题！
.carousel-inner { margin: auto; width: 90%; }
.carousel-control            { width:  4%; }
.carousel-control.left,
.carousel-control.right {
  background-image:none;
}
 
.glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
  margin-top:-10px;
  margin-left: -10px;
  color: #444;
}

.carousel-inner {
  a {
    display:table-cell;
    height: 180px;
    width: 200px;
    vertical-align: middle;
  }
  img {
    max-height: 150px;
    margin: auto auto;
    max-width: 100%;
  }
}

@media (min-width: 992px ) {

  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
      left: 0;
      -webkit-transform: translate3d(16.7%, 0, 0);
      transform: translate3d(16.7%, 0, 0);
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
      left: 0;
      -webkit-transform: translate3d(-16.7%, 0, 0);
      transform: translate3d(-16.7%, 0, 0);
  }

}


@media (max-width: 992px ) {

    .carousel-inner > .item.next,
    .carousel-inner > .item.active.right {
        left: 0;
        -webkit-transform: translate3d(25%, 0, 0);
        transform: translate3d(25%, 0, 0);
    }

    .carousel-inner > .item.prev,
    .carousel-inner > .item.active.left {
        left: 0;
        -webkit-transform: translate3d(-25%, 0, 0);
        transform: translate3d(-25%, 0, 0);
    }
}

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

  for (var i=0;i<2;i++) {
    next=next.next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    
    next.children(':first-child').clone().appendTo($(this));
  }
});