猫头鹰旋转木马带条件选项

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 s，然后选择所有.mbgc-gallery s中的全部.owl-item s。
但你只想测试“这个”轮播。像这样的东西应该工作：

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