猫头鹰轮播在其选项

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配置中的查询会再次扫描整个文档。您选择所有.mbgc-gallery，然后选择所有.owl-item的所有.mbgc-gallery。 但你只想测试“这个”旋转木马。这样的事情应该有效：

$(".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>