Owl Carousel - larghezza errata

Question

Ho tre elementi reattivi (img), ma ogni volta che viene caricato il carosello del gufo, la larghezza del gufo-wrapper è due volte più grande di tutte le immagini. Ad esempio; se le immagini a grandezza intera richiedono 1583 px, l'involucro del gufo impiega 1583 * 3 * 2 = 9498 px, e tutto il sito prende questa larghezza, invece la dimensione intera (1583 px).

Il problema: http://nacionalempreendimen.web2144.uni5.net

HTML

<div id="promoted-carousel"> 
    <div class="item"><img src="assets/img/tmp/1.jpg"></div> 
    <div class="item"><img src="assets/img/tmp/2.jpg"></div> 
    <div class="item"><img src="assets/img/tmp/3.jpg"></div> 
</div> 

CSS

#promoted-carousel .item img{ 
    display: block; 
    width: 100%; 
    height: auto; 
} 

JS

$('#promoted-carousel').owlCarousel({ 
    autoPlay: 5000, 
    stopOnHover: true, 
    singleItem: true 
}); 

UPDATE

ho visto che quando ho messo #promoted-carousel div fuori .page-wrapper div, funziona correttamente. Ma la mia conoscenza del css non è sufficiente per capire perché funzioni.

Answer 1

Questo problema è un problema noto. Devi mettere table-layout: fixed sul tavolo.

https://github.com/OwlFonk/OwlCarousel/issues/274

Answer 2

Io uso spesso 2 involucri quando si lavora con Owl Carosello. Avrei impostato tutti i miei stili per-slide per la loro altezza/larghezza ecc. E il wrapper esterno che avrei impostato per la larghezza dello stage ecc.

Ho quindi chiamato il carosello del gufo sull'involucro interno e di solito ho pochissimi problemi

<div id="promoted-carousel-outer"> 
    <div id="promoted-carousel"> 
     <div class="item"><img src="assets/img/tmp/1.jpg"></div> 
     <div class="item"><img src="assets/img/tmp/2.jpg"></div> 
     <div class="item"><img src="assets/img/tmp/3.jpg"></div> 
    </div> 
</div> 

Answer 3

Incredibilmente, ho il sospetto che questo potrebbe essere un bug all'interno di owlCarousel.

Cosa mi ha aiutato è stata la rimozione del * 2 in appendWrapperSizes:

appendWrapperSizes : function() { 
     var base = this, 
      width = base.$owlItems.length * base.itemWidth; 

     base.$owlWrapper.css({ 
      "width": width,//Comment out this part=> * 2, 
      "left": 0 
     }); 
     base.appendItemsSizes(); 
    }, 

questo ha lavorato per owlCarousel 1.3.3.

Answer 4

mi ha aiutato:

setTimeout(function() { 
    $('#promoted-carousel').owlCarousel({ 
     autoPlay: 5000, 
     stopOnHover: true, 
     singleItem: true 
    }); 
}, 10);