owl carousel 2 not work with loop and 1 items (Bug

Question

I work with owl carousel 2 for carousel content.

JS:

$('#owl-demo').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    items: 1,
});

HTML:

<div id="owl-demo" class="owl-carousel">
    <div class="item"><h4>1</h4></div>
</div>

Problem:

when I have one content (dynamic content using PHP) loop:true and items:1 not work and I see blank But if I add two content Owl worked true!!

EDIT : my content is dynamic ( 1 - ....). when my result is one content owl have a problem.

Problem DEMO

worked DEMO

how do fix this problem ?

Answer 1

I hope the below method will solve your problem.
You dont need to edit the owl carousel js. The same method can be applied to Bx Slider also.

$('.owl-demo').owlCarousel({
    margin: 0,
    responsiveClass: true,
    smartSpeed: 500,
    dots: ($(".owl-carousel .item").length > 1) ? true: false,
    loop:($(".owl-carousel .item").length > 1) ? true: false,
    responsive: {
        0: {
            items: 1,
        },
        500: {
            items: 1,
        },
        768: {
            items: 1,
        }
    } 
})

Answer 2

You could check the number of .item elements before you call your plugin like so:

// Be more specific with your selector if .items is used elsewhere on the page. 
var items = $('.items');
if(items.length > 1) {
    $('#owl-demo').owlCarousel({
        loop: true,
        ...
    });
} else {
    // same as above but with loop: false;
}

Answer 3

If you want to put only single image in owlCarousel as a banner image then you can add one argument in owl carousel js.

singleItem: true

like this:

<script type="text/javascript">
    $(document).ready(function() {
        $('#main_banner').owlCarousel({
            margin: 0,
            loop: true,
            navText: [ "<img src='images/leftArrow.png'>", "<img src='images/rightArrow.png'>" ],
            dots: false,
            items :1,
            autoplay: true,
            singleItem: true
        });
    });
    </script>

Answer 4

I used this method to solve the problem and I think it's pretty easy.

var options={
    margin: 10,
    nav: true,
    items: 1
    };
   if($('#owl-demo .owl-item').length>1){
       options.loop=true;
   }
   $('#owl-demo').owlCarousel(options);

Answer 5

$('#owl-demo').owlCarousel({ loop: true, margin: 10, nav: true, items: 1, responsive:{ 0:{ items:1, nav:true, loop:true }, 600:{ items:1, nav:false, loop:true }, 1000:{ items:1, nav:true, loop:true } } });

Answer 6

I report this bug to Owl developer group and fix this problem here.

Change this line in Commit

view = Math.max(settings.items * 2, 2),

Now this worked in demo