Owl 徽标项的轮播 2 不循环

Question

我下载的 bootstrap 模板有问题。主题是"REVEAL"。在logo部分，幻灯片应该使用无限循环，但是到了最后一个logo就直接跳转了，没有继续到第一个。有人可以帮忙吗？

正在尝试将循环设为 "TRUE"。

<div class="owl-carousel clients-carousel">
    <img src="img/clients/client-1.png" alt="">
    <img src="img/clients/client-2.png" alt="">
    <img src="img/clients/client-3.png" alt="">
    <img src="img/clients/client-4.png" alt="">
    <img src="img/clients/client-5.png" alt="">
    <img src="img/clients/client-6.png" alt="">
    <img src="img/clients/client-7.png" alt="">
    <img src="img/clients/client-8.png" alt="">
</div>


</script type="text/javascript"> 
$(".clients-carousel").owlCarousel({
    autoplay: true,
    dots: true,
    loop: true,
    autoplayTimeout:2000,
    responsive: {
      0: {
        items: 2
      },
      768: {
        items: 4
      },
      900: {
        items: 6
      }
    }
  });
</script>

Answer 1

正如@Flo 在评论中提到的，您在打开 <script> 标签时输入错误。另外，来自 documentation:

You don't need any special markup. All you need is to wrap your divs(owl works with any type element a/img/span..) inside the container element . Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file. If you want the default nav controls like dots or buttons, you must also include the "owl-theme" class on that same div.

这是工作示例：

<div class="owl-carousel">
  <img src="https://bootstrapmade.com/demo/themes/Reveal/img/clients/client-1.png" alt="">
  <img src="https://bootstrapmade.com/demo/themes/Reveal/img/clients/client-2.png" alt="">
  <img src="https://bootstrapmade.com/demo/themes/Reveal/img/clients/client-3.png" alt="">
  <img src="https://bootstrapmade.com/demo/themes/Reveal/img/clients/client-4.png" alt="">
  <img src="https://bootstrapmade.com/demo/themes/Reveal/img/clients/client-5.png" alt="">
  <img src="https://bootstrapmade.com/demo/themes/Reveal/img/clients/client-6.png" alt="">
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha256-kksNxjDRxd/5+jGurZUJd1sdR2v+ClrCl3svESBaJqw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>

<script>
  $(document).ready(function(){
    $(".owl-carousel").owlCarousel({
      autoplay: true,
      dots: true,
      loop: true,
      autoplayTimeout:2000,
      responsive: {
        0: {
          items: 2
        },
        768: {
          items: 4
        },
        900: {
          items: 6
        }
      },
    });
  });
</script>

编辑
您正在使用的 Bootstrap 模板使用 Owl 轮播的旧版本 2.3.2。我建议更新到最新版本。

似乎在旧版本中要使无限循环正常工作，您需要设置 checkVisibility 选项，如本 issue 中所述。所以，除了你的其他选项，设置：

checkVisibility: true

Owl 徽标项的轮播 2 不循环

Owl Carousel 2 for logo items not looping

javascript

jquery

owl-carousel-2