Sowa Karuzela - szerokość jest obliczana nieprawidłowo

Question

Mam trzy reagujące przedmioty (imgi), ale za każdym razem, gdy ładowana jest sowa-karuzela, szerokość owl-wrappera jest dwa razy większa niż wszystkie obrazy razem. Na przykład; jeśli rozmiar pełnych obrazów zajmuje 1583 px, owl-wrapper zajmuje 1583 * 3 * 2 = 9498px, a cała strona przyjmuje tę szerokość, zamiast pełnego rozmiaru (1583 px).

Emisja: 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

Widziałem, że kiedy kładę #promoted-carousel div z .page-wrapper div, to działa poprawnie. Ale moja znajomość css nie wystarczy, aby zrozumieć, dlaczego działa.

Answer 1

Ten problem jest znanym problemem. Musisz umieścić table-layout: fixed na stole.

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

Answer 2

często używam 2 owijarki podczas pracy z Sowa Karuzela. Ustawiłabym wszystkie style na slajd dla ich wysokości/szerokości itp. I zewnętrzną banderolkę, którą ustawiłam na szerokość sceny itp.

Następnie wywołuję karuzelę sowy na wewnętrznym opakowaniu i zwykle mam bardzo mało problemów

<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

Niewiarygodnie, podejrzewam, że może to być błąd w owlCarousel.

Co pomogło mi było usunięcie * 2 w 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(); 
    }, 

To działało na owlCarousel 1.3.3.

Answer 4

pomogło mi:

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