Owl Carousel - width is calculated wrong
Solution 1
it helped me:
setTimeout(function() {
$('#promoted-carousel').owlCarousel({
autoPlay: 5000,
stopOnHover: true,
singleItem: true
});
}, 10);
Solution 2
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
setTimeout(function() {
$('#promoted-carousel').owlCarousel({
autoPlay: 5000,
stopOnHover: true,
singleItem: true
});
}, 10);
Solution 3
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.
I then call 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>
Vinicius Ottoni
Updated on February 20, 2020Comments
-
Vinicius Ottoni about 4 years
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).
The issue:
http://nacionalempreendimen.web2144.uni5.netHTML
<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
#promoted-carousel
div out of.page-wrapper
div, it works properly. But my knowledge of css it is not sufficient to understand why it works. -
RustyBadRobot about 4 yearsEven though this has been marked down, it solved the issue for me after hours of banging my head against a wall.