Owl Carousal2 with items 1 and loop true

Question

$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    items: 1
  })
});

<div class="owl-carousel">
    <div class="item"><h4>1</h4></div>
</div>
<link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>

Console Error : TypeError: items[clones[(clones.length - 1)]] is undefined. this error due to only one item div and property loop true and item 1. So. any solution at this situation. I know this type of Situation does not occurs but if any solutions please tell me Thanks a lot.

Answer 1

Add onInitialize and check how many items the carousel contains. If the carousel has 1 or less items, set loop to false.

$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    items: 1,
    onInitialize: function (event) {
        if ($('.owl-carousel .item').length <= 1) {
           this.settings.loop = false;
        }
    }
  })
});

Answer 2

Try this:

$('.owl-carousel').owlCarousel({
    loop: $('.owl-carousel .item').size() > 1 ? true:false,
    items: 1,
    margin:10,
    nav:true
})