Owl Carousel 2 - hide custom nav (if 1 item)

I'm looking for a way to hide the custom navigation if there is only one item.

HTML

<script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.carousel.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/OwlFonk/OwlCarousel2/develop/src/css/owl.theme.default.css">
<link rel="stylesheet" href="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/css/owl.carousel.css">
<div class="owl-demo">
    <div class="item">
        <a class="centrePhotoLink" href="/en/gb/available-office-space/manchester/talbot-road-29626"><span class="imgWrapper loading-image-container"><span><img data-src= https://content.instantoffices.com/sc/Prod/images/centres/212width/29626/29626-199385.webp?o=jpg class="productImage owl-lazy" alt="search result"></span></span></a>
    </div>
    <div class="item">
        <a class="centrePhotoLink" href="/en/gb/available-office-space/manchester/talbot-road-29626"><span class="imgWrapper loading-image-container"><span><img data-src= https://content.instantoffices.com/sc/Prod/images/centres/212width/29626/29626-199385.webp?o=jpg class="productImage owl-lazy" alt="search result"></span></span></a>
    </div>
    <div class="item">
        <a class="centrePhotoLink" href="/en/gb/available-office-space/manchester/talbot-road-29626"><span class="imgWrapper loading-image-container"><span><img data-src= https://content.instantoffices.com/sc/Prod/images/centres/212width/29626/29626-199385.webp?o=jpg class="productImage owl-lazy" alt="search result"></span></span></a>
    </div>
    <div class="item">
        <a class="centrePhotoLink" href="/en/gb/available-office-space/manchester/talbot-road-29626"><span class="imgWrapper loading-image-container"><span><img data-src= https://content.instantoffices.com/sc/Prod/images/centres/212width/29626/29626-199385.webp?o=jpg class="productImage owl-lazy" alt="search result"></span></span></a>
    </div>
    <div class="item">
        <a class="centrePhotoLink" href="/en/gb/available-office-space/manchester/talbot-road-29626"><span class="imgWrapper...

CSS

.owl-carousel .owl-item {
    background:#CCC;
}
.owl-carousel .owl-item img {
    display:block;
    widht:100%;
    height:400px;
}.owl-demo {
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.owl-demo .item {
    margin: 20px;
    height: 200px;
    width: 200px;
    background: red;
}
.owl-demo .item img {
    display: block;
    width: 50%;
    height: auto;
}

body

JavaScript

$('.owl-carousel').owlCarousel({
    loop: $('.owl-carousel img').length > 1 ? true : false,
    items: 1
});