Owl Carousel with conditionals on its options

Question

I've got a dozen galleries and some of them only has one image. This is causing the carousel and page to break because the carousel has loop = true set on it. I'm trying to write a condition to say if there's more than one item in the carousel, to make loop = true else make loop = false. However, I took a shot at it but it doesn't seem to be working.

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

Can it work like this or do I need to do something after it initializes?

EDIT I forgot to mention that a page could have more than one gallery on it, so I am not sure if this needs to be wrapped in a .each function or maybe a unique selector? I have data attributes set up on each gallery so it has an unique ID.

Answer 1

Your query in the owlCarousel configuration scans the whole document again. You select all .mbgc-gallerys and then you select all .owl-items of all .mbgc-gallerys.
But you only want to test "this" carousel. Something like this should work:

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

edit:

Made a snippet.
Like this?

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