Owl Carousel - Width is not calculated correctly

Question

I have three responsive elements (imgs), but every time an owl carousel is loaded, the owl wrapper is twice as wide as all the images. For example; if full-size images occupy 1583 px, owl-wrapper takes 1583 * 3 * 2 = 9498px, and the entire site occupies this width, instead the full size (1583 px).

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

I saw that when I put the #promoted-carousel div from the .page-wrapper div, it works correctly. But my css knowledge is not enough to understand why it works.

Answer 1

I often use 2 wrappers when working with Owl Carousel. I would set all my styles for each slide for their height / width, etc. And the outer wrapper that I set for the width of the scene, etc.

Then I call the owl carousel on the inner wrapper, and I usually have very few problems.

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

Incredibly, I suspect that this may be a bug in owlCarousel.

Which helped me remove * 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(); }, 

This worked for owlCarousel 1.3.3.

Answer 3

it helps me:

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

Answer 4

This issue is a known issue. You need to put table-layout: fixed in the table.

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