Сова Карусель - неверно вычисляется

Question

У меня есть три отзывчивых элемента (imgs), но каждый раз, когда загружается сова-карусель, ширина обойной обертки в два раза больше всех изображений. Например, если полноразмерные изображения занимают 1583 px, owl-wrapper берет 1583 * 3 * 2 = 9498px, и весь сайт занимает эту ширину, а не полный размер (1583 px).

Вопрос: 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

Я видел, что, когда я поставил #promoted-carousel DIV из .page-wrapper DIV, он работает должным образом. Но моего знания css недостаточно, чтобы понять, почему он работает.

Answer 1

Эта проблема является известной проблемой. Вам нужно положить table-layout: fixed на стол.

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

Answer 2

Я часто использую 2 оберток при работе с Сов Carousel. Я установил все свои стили на слайде за их высоту/ширину и т. Д. И внешнюю обертку, которую я бы установил для ширины сцены и т. Д.

Я тогда называю сова карусели на внутренней обертке, и у меня обычно очень мало проблем

<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

Невероятно, я подозреваю, что это может быть ошибка внутри owlCarousel.

Что помогло мне было удаление * 2 в 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(); 
    }, 

Это работало owlCarousel 1.3.3.

Answer 4

это мне помогло:

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