オプションで条件付きのフクロウカルーセル

Question

私には12のギャラリーがあり、その中には1つのイメージしかないものもあります。これは、カルーセルに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 
     } 
    } 
}); 

初期化後に何かする必要がありますか？

EDIT 私はページがそれに複数のギャラリーを持つことができることを言及するのを忘れたので、私は、これは.each機能または多分独特のセレクタに包まれる必要があるかどうかわからないのですか？私はデータ属性が各ギャラリーに設定されているので、一意のIDを持っています。

Answer 1

owlCarousel構成での照会は、文書全体を再度スキャンします。すべて.mbgc-galleryを選択し、.mbgc-galleryのすべての.owl-itemを選択します。
「この」カルーセルだけをテストしたいと思っています。このような何か作業をする必要があります：

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