owl carousel 2 non funziona con loop e 1 elementi (Bug corretto ora)

Question

Io lavoro con carosello di gufo 2 per il contenuto di giostra.

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> 

Problema:

quando ho un contenuto (contenuto dinamico utilizzando PHP) loop:true e items:1 non funziona e vedo vuoto Ma se Aggiungo due contenuti Il gufo ha funzionato perfettamente !!

MODIFICA: il mio contenuto è dinamico (1 - ....). quando il mio risultato è di un gufo contenuto ha un problema.

Problema DEMO

lavorato DEMO

come si fa a risolvere questo problema?

Answer 1

segnalo questo bug al gruppo degli sviluppatori Gufo e risolvere questo problema here.

Variazione questa linea in Commit

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

Ora, questo ha lavorato in demo

Answer 2

Si potrebbe verificare il numero di elementi .item prima di chiamare il plugin in questo modo:

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

Se si vuole solo mettere una sola immagine in owlCarousel come una bandiera, allora è possibile aggiungere un argomento in js gufo carosello.

singleItem: true 

come questo:

<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

Ho usato questo metodo per risolvere il problema e penso che sia abbastanza facile.

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

Answer 5

Spero che il metodo seguente risolva il problema.
Non è necessario modificare il carousel del gufo js. Lo stesso metodo può essere applicato anche a Bx Slider.

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