Owl Carousel - chiều rộng được tính sai

Question

Tôi có ba mục đáp ứng (imgs), nhưng mỗi lần Owl-Carousel được tải, chiều rộng của cú đúp là kích thước của tất cả các hình ảnh với nhau gấp hai lần. Ví dụ; nếu các hình ảnh fullsize mất 1583 px, các wrapper cú mất 1583 * 3 * 2 = 9498px, và tất cả các trang web có chiều rộng này, thay vì kích thước đầy đủ (1583 px).

Vấn đề: 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 
}); 

CẬP NHẬT

Tôi thấy rằng khi tôi đặt #promoted-carousel div ra khỏi .page-wrapper div, nó hoạt động đúng cách. Nhưng kiến ​​thức của tôi về css nó không đủ để hiểu tại sao nó hoạt động.

Answer 1

Sự cố này là sự cố đã biết. Bạn cần phải đặt table-layout: fixed trên bàn.

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

Answer 2

Tôi thường sử dụng 2 trình bao bọc khi làm việc với Owl Carousel. Tôi muốn thiết lập tất cả các phong cách của tôi trên mỗi slide cho chiều cao/chiều rộng của họ vv và wrapper bên ngoài tôi muốn thiết lập cho chiều rộng sân khấu vv.

Tôi sau đó gọi carousel cú trên wrapper bên trong và tôi thường có rất ít vấn đề

<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

Không thể tin được, tôi nghi ngờ đây có thể là lỗi trong owlCarousel.

gì giúp tôi được tháo * 2 trong 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(); 
    }, 

này làm việc cho owlCarousel 1.3.3.

Answer 4

nó đã giúp tôi:

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