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（对于桌面视图）：

.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（我现在只是想让桌面视图正确）

[为拼写/标点符号编辑]

Answer 1

在JS中改变行：

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

6而不是4。

Answer 2

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

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

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

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

希望得到这个帮助。

Answer 3

查看示例，将项目附加到轮播的循环应该只运行两次 error.POSITION_UNAVAILABLE

您将自己设置为for (var i=0;i<2;i++) {。

将4更改为4

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

3 个答案: