Question

我很难尝试使用loop选项，在启用时，如果标记没有足够的项目，则不会复制导致循环错觉所需的元素。< / p>

例如，使用此标记：

<div class="col-7 col-md-7 d-flex justify-content-center align-items-center hidden-sm-down shows">

  <ul class="owl-carousel">

    <li class="item">
      <img src="" />
    </li>

    <li class="item">
      <img src="" />
    </li>

    <li class="item">
      <img src="" />
    </li>

    <li class="item">
      <img src="" />
    </li>

  </ul>

</div>

我已经定义了适合Bootstrap 4 col-md-7中可见的3张图像的基本结构。其他人保持隐藏，可以通过Carousel访问，没有太多特殊配置：

$( '.owl-carousel' ).owlCarousel({

      loop: true,
      margin: 10,
      dots: false,
      navText: [ '<span class="fa fa-chevron-left"></span>', '<span class="fa fa-chevron-right"></span>' ],
      responsive:{

        0: {
            items: 1,
            nav: false
        },

        1000: {
            items: 3,
            nav: true
        }
    }
})

如果我总是至少有三个<li class="item"></li>并且那就是问题，这将是完美的。因为它的假动态＆＃39; （与Hugo一起）发布时，它的内容不会太多，所以很明显这个Carousel不会有这个最小数量。

我已经搜索了一个解决方案并找到了this，但它并没有为我工作，即使它应该。我创建了a Fiddle以隔离问题，使用多个Carousels来模拟我真正拥有的东西，并且最初它有效，没有不必要的重复，但后来我看到执行是在windows.onload中设置的，因为我不知道的一些原因是，这个三元组总是在false评估。

首先我认为可能是因为jQuery.size（）不再存在，但即使将其更改为原生length，它仍然在重复。

我已经多次审查了源代码，看看Hugo是否正在生成正确的标记，除了一些可能会干扰的实际实现的幻想之外，这一切都很好。

使其几乎成功的解决方法是在Hugo＆＃34;循环＆＃34;之后生成虚拟<li></li>。（range）。但是作为副作用，这带来了导航箭头/按钮，如果点击几次，最终会将猫头鹰的偏移定位在空白的虚假条目上。

关于还有什么可能是错误的任何想法？

Owl Carousel＆＃39; loop＆＃39;不必要地复制项目

0 个答案: