Eulenkarussell 2 funktioniert nicht mit Schleife und 1 Elementen (Bug jetzt behoben)

Question

Ich arbeite mit Eulenkarussell 2 für Karussell Inhalt.

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:

, wenn ich einen Inhalt (dynamische Inhalte mit PHP) loop:true und items:1 nicht funktionieren und ich sehe leer, aber wenn Ich füge zwei Inhalte hinzu. Eule hat funktioniert !!

BEARBEITEN: mein Inhalt ist dynamisch (1 - ....). Wenn mein Ergebnis eine Inhalts Eule ist, habe ich ein Problem.

Problem DEMO

arbeitete DEMO

, wie dieses Problem behebe?

Answer 1

ich diesen Fehler zu melden, um Owl Entwicklergruppe und dieses Problem beheben here.

Ändern Sie diese Zeile in Commit

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

Jetzt arbeitete diese in demo

Answer 2

Sie können die Anzahl der .item Elemente überprüfen, bevor Sie wie so Ihr Plugin rufen:

// 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

Wenn Sie nur einzelne Bild in owlCarousel als Banner Bild setzen wollen, dann können Sie ein Argument in Eule Karussell js hinzuzufügen.

singleItem: true 

wie folgt aus:

<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

benutzte ich diese Methode das Problem zu lösen und ich denke, es ist ziemlich einfach.

Answer 5

Ich hoffe, die folgende Methode wird Ihr Problem lösen.
Sie müssen das Eulenkarussell js nicht bearbeiten. Die gleiche Methode kann auch auf Bx Slider angewendet werden.

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