我有三个响应项(imgs),但每次加载Owl-Carousel时,owl-wrapper宽度是所有图像大小的两倍.
例如;如果图像全尺寸需要1583像素,猫头鹰包装需要1583 * 3 * 2 = 9498px,所有网站都采用这个宽度,而不是全尺寸(1583像素).
例如;如果图像全尺寸需要1583像素,猫头鹰包装需要1583 * 3 * 2 = 9498px,所有网站都采用这个宽度,而不是全尺寸(1583像素).
问题：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
我看到当我把#reinved-carousel div放在.page-wrapper div之外时,它可以正常工作.但是我对css的了解还不足以理解它的工作原理.
解决方法
在与Owl Carousel合作时,我经常使用2个包装.我将每张幻灯片的所有样式设置为高度/宽度等,并为舞台宽度等设置外部包装.
然后我在内包装上调用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>
