Owl 选项带有条件的轮播

Question

我有十几个画廊，其中一些只有一张图片。这导致轮播和页面中断，因为轮播上设置了 loop = true。我正在尝试编写一个条件来说明轮播中是否有多个项目，使 loop = true 否则使 loop = false。但是，我尝试了一下，但似乎没有用。

$(".mbgc-gallery").owlCarousel({
    margin: 0,
    dots: false,
    nav:($(".mbgc-gallery .owl-item").length > 1) ? true: false,
    navText: [],
    loop:($(".mbgc-gallery .owl-item").length > 1) ? true: false,
    autoplay: false,
    autoplayHoverPause: true,
    responsive: {
        0: {
            items: 1
        },
        600: {
            items: 1
        },
        1000: {
            items: 1
        }
    }
});

它可以这样工作还是我需要在初始化后做些什么？

编辑我忘了提到一个页面上可以有多个画廊，所以我不确定这是否需要包装在 .each 函数中，或者可能是一个独特的选择器？我在每个图库上都设置了数据属性，因此它有一个唯一的 ID。

Answer 1

您在 owlCarousel 配置中的查询再次扫描了整个文档。你 select 所有 .mbgc-gallery 然后你 select 所有 .owl-item 所有 .mbgc-gallery。
但是您只想测试 "this" 轮播。这样的事情应该有效：

$(".mbgc-gallery").each(function(index) {
    var $gallery = $(this);
    var onMultiple = $gallery.children(".owl-item").length > 1 ? true : false;
    $gallery.owlCarousel({
        loop: onMultiple,
        [...]
    });
};

编辑：

制作了一个片段。
像这样？

$('.owl-carousel').each(function(i) {
  var ifMultiple = false;
  $thisGallery = $(this);
  if($thisGallery.children('.item').length > 1) {
    ifMultiple = true;
  }
  $thisGallery.owlCarousel({
    loop: ifMultiple,
    autoplay: true,
    dots: true,
    nav: true,
    items: 1,
    autowidth: true,
    nav: false,
    dots: false,
    responsive:false
  })
})

.item {
  box-sizing: border-box;
  padding: 2rem;
  width: 200px;
  height: 150px;
  background: yellow;
}

.owl-carousel {
  border: 1px solid black;
  width: 200px !important;
}

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://github.com/OwlCarousel2/OwlCarousel2/raw/develop/dist/owl.carousel.min.js"></script>



<h2>multiple</h2>
<div class="owl-carousel">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<h2>single</h2>
<div class="owl-carousel">
  <div class="item">1</div>
</div>

<h2>multiple</h2>
<div class="owl-carousel">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<h2>single</h2>
<div class="owl-carousel">
  <div class="item">1</div>
</div>

Owl 选项带有条件的轮播

Owl Carousel with conditionals on its options

javascript

jquery

owl-carousel-2