如何停止我的多项目引导轮播克隆？答案

【问题标题】：How do I stop my multi-item bootstrap carousel cloning?如何停止我的多项目引导轮播克隆？
【发布时间】：2016-07-21 11:35:11
【问题描述】：

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

我正在尝试使用 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（用于桌面视图）：

.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（我现在只是真的想获得桌面视图）

[编辑拼写/标点符号]

【问题讨论】：

标签： javascript css twitter-bootstrap carousel

【解决方案1】：

在 JS 中换行：

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

6 而不是 4。

【讨论】：

谢谢，我试过了，但还是有同样的问题。
还原为原始 JS 文件并更改代码中的幻灯片数量。还要考虑@Appreiron 所说的！

【解决方案2】：

即使你是网页设计的新手，你也在考虑复制性能实际上是非常好的。我建议您在定义轮播之前创建数组。数组将包含您所有的 slides jQuery 对象：

var slides = [$('.slide-1'), $('.slide-2')];

用动态元素填充它，或者只定义现有的选择器。它将允许您重用 jQuery 对象，而不是创建新对象。您可以随意添加现有块。

这里还有一点 - 您应该在轮播中定义元素限制或在每次迭代时从中删除 unseen 幻灯片等。这将为您节省大量内存（即使您重新使用已经存在的对象，由于追加，您的容器将扩展）。

希望对您有所帮助。

【讨论】：

谢谢@Appeiron，这听起来很明智，我认为我需要对 jQuery 进行更多阅读才能完全理解，但它让我有一些需要研究的地方。
想想 DOM 元素，因为它们是对象。不需要复制它们，你只需要一次又一次地插入它们，carousel 就是对它们的查询。
干杯我会试一试，让你知道它是否有效！

【解决方案3】：

查看示例，将项目附加到轮播的循环应该只运行两次 for (var i=0;i<2;i++) {

您将您的设置为4。

将4 更改为2

【讨论】：