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

问题:

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 ?

回答1:

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

回答2:

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); 

回答3:

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; } 

回答4:

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,         }     }  }) 

回答5:

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> 

回答6:

$('#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 } } });

文章来源: owl carousel 2 not work with loop and 1 items (Bug Fixed Now)