javascript - 如何停止多元素 Bootstrap 轮播克隆？

Question

我对网页设计还很陌生 - 我一直在自学，通常能够在网上找到任何问题的解决方案，但是我遇到了一些我还没有足够知识来解决的问题修复但似乎无法找到满意的答案。

我正在尝试使用 Bootstrap 创建循环多元素轮播，并修改了我找到的代码 here显示 6 个图像而不是 4 个。

我使用的 html 或多或少与上面的链接相同(我刚刚将各个图像的列大小修改为 col-md-2 col-sm-6 col -xs-12)。我在网上发现了一些类似的问题，并按照这些问题，我将JS修改为:

$('#myCarousel').carousel({
 interval: 40000
});

// ARCHIVE CAROUSEL

$('.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<4;i++) {
    next=next.next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));
  }
});

以及 CSS(对于桌面 View ):

.carousel-inner .active.left { left: -16.7%; }
.carousel-inner .next        { left:  16.7%; }
.carousel-inner .prev        { left: -16.7%; }


.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
  left: 0;
  -webkit-transform: translate3d(16.7%, 0, 0);
  -ms-transform: translate3d(16.7%, 0, 0);
  -o-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);
  -ms-transform: translate3d(-16.7%, 0, 0);
  -o-transform: translate3d(-16.7%, 0, 0);
  transform: translate3d(-16.7%, 0, 0);
}

轮播在我的浏览器预览中完全按照我想要的方式工作 - 但有一个问题。整个轮播在页面下方克隆了 4 次。

我知道，因为这对我来说是新的，所以它可能是非常明显和愚蠢的事情，但我真的很想了解我自己的学习中哪里出了问题，是否有人可以帮助我？

非常感谢!

Bootply 预览 here (我现在只是想获得桌面 View )

[编辑拼写/标点符号]

Answer 1

更改 JS 中的行:

for (var i=0;i<6;i++) {

6 而不是 4。