貓頭鷹旋轉木馬帶條件選項

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>