Javascript 猫头鹰旋转木马 - 宽度计算错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29375553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Owl Carousel - width is calculated wrong
提问by Vinicius Ottoni
I have three responsive items (imgs), but every time the Owl-Carousel is loaded, the owl-wrapper width is two times the size of all images together. For example; if the images fullsize takes 1583 px, the owl-wrapper takes 1583 * 3 * 2 = 9498px, and all site takes this width, instead the full size (1583 px).
我有三个响应项目 (imgs)，但是每次加载 Owl-Carousel 时，owl-wrapper 的宽度都是所有图像大小的两倍。例如; 如果图像全尺寸需要 1583 像素，则猫头鹰包装器需要 1583 * 3 * 2 = 9498 像素，并且所有站点都采用此宽度，而不是全尺寸（1583 像素）。
The issue: http://nacionalempreendimen.web2144.uni5.net
问题：http: //nacionalempreendimen.web2144.uni5.net
HTML
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
CSS
#promoted-carousel .item img{
display: block;
width: 100%;
height: auto;
}
JS
JS
$('#promoted-carousel').owlCarousel({
autoPlay: 5000,
stopOnHover: true,
singleItem: true
});
UPDATE
更新
I saw that when I put #promoted-carouseldiv out of .page-wrapperdiv, it works properly. But my knowledge of css it is not sufficient to understand why it works.
我看到当我把#promoted-carouseldiv放在div 之外时.page-wrapper，它工作正常。但是我对 css 的了解不足以理解它为什么起作用。
回答by Anto
I often use 2 wrappers when working with Owl Carousel. I'd set all my styles per-slide for their height/width etc and the outer wrapper I'd set for the stage width etc.
在使用 Owl Carousel 时，我经常使用 2 个包装器。我会为每张幻灯片设置所有样式的高度/宽度等，并为舞台宽度等设置外包装。
I then call owl carousel on the inner wrapper and I usually have very few problems
然后我在内包装上调用 owl 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>
回答by maLikiz
it helped me:
它帮助了我：
setTimeout(function() {
$('#promoted-carousel').owlCarousel({
autoPlay: 5000,
stopOnHover: true,
singleItem: true
});
}, 10);
回答by Disney Land 2017
this solution helped me too , if your theme is using bootstrape 4 and the owl plugin is using bootstrape 3 this will fix the owl width issue
这个解决方案对我也有帮助，如果您的主题使用的是 bootstrape 4 而 owl 插件使用的是 bootstrape 3，这将解决 owl 宽度问题
setTimeout(function() {
$('#promoted-carousel').owlCarousel({
autoPlay: 5000,
stopOnHover: true,
singleItem: true
});
}, 10);
回答by Michael Litvin
Unbelievably, I suspect that this might be a bug within owlCarousel.
令人难以置信的是，我怀疑这可能是 owlCarousel 中的一个错误。
What helped me was removing the * 2in appendWrapperSizes:
帮助我的是删除* 2in 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.
这适用于 owlCarousel 1.3.3。
回答by crazypsycho
This problem is a known issue. You need to put table-layout: fixedon the table.
此问题是已知问题。你需要放在table-layout: fixed桌子上。
