Gufo carosello - larghezza automatica, l'ultimo elemento è estratto dallo stack

Question

Sto riscontrando strani problemi con OWL CAROUSEL 2. Sto creando un semplice carosello per 12 tavoli, ma quando si utilizza l'opzione "autoWidth", l'ultima tabella viene estratta da pila della giostra.

DEMO

Se si apre il violino, c'è giostra per ogni mese in anno. Alla fine del carosello, non c'è dicembre, ma se controlli il codice sorgente, puoi vedere che dicembre è lì. Per qualche motivo, il plug-in Carousel OWL sta tirando fuori dicembre.

Qualche idea? In anticipo, molte grazie!

Answer 1

Mi sono imbattuto anche in questo problema. L'ho risolto male, ma funziona. in entrambi i browser. Il problema era con l'elemento owl-stage. La libreria carosello del gufo ha contato la proprietà width, ma gli elementi non si adattano al wrapper. Quindi devo chiamare una funzione dopo l'evento init e aggiungere circa 100px ad esso. Ho usato la funzione setTimeout con questo .molto cattivo approccio lo so, ma nel mio progetto ci sono un sacco di funzioni js che accadono e non allways ottenere il giusto width di proprietà (a volte ho undefined)

Così il codice è:

$('.owl-carousel').owlCarousel({ 
     margin:90, 
     nav:true, 
     dots:true, 
     autoWidth:true, 
     afterInit: setWidth() 
    }); 

    function setWidth(){ 
     setTimeout(function(){ 
      var carWidth = $('.owl-stage').width() + 100; 
      $('.owl-stage').width(carWidth); 
     },200); 

    } 

sono sicuro che potrebbe funzionare senza setTimeout, ma le scadenze non vedo l'ora (* sentirsi male per esso).

Spero che aiuti!

Answer 2

Aggiungi solo display flex in CSS per la classe .owl-stage e aggiungi anche la funzione jS per dispositivi più piccoli.

CSS

.owl-stage{display:flex} 

JS

$('.owl-carousel').owlCarousel({ 
    loop: false, 
    autoWidth:true, 
    margin:10, 
    nav:true, 
    responsive:{ 
    0:{ 
    items:1, 
    autoWidth:false 
    }, 
    768:{ 
    items:3 
    } 
    } 
});