javascript - Owl Carousel - width is calculated wrong -
i have 3 responsive items (imgs), every time owl-carousel loaded, owl-wrapper width 2 times size of images together. example; if images fullsize takes 1583 px, owl-wrapper takes 1583 * 3 * 2 = 9498px, , site takes width, instead full size (1583 px).
the issue: 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 when put #promoted-carousel div out of .page-wrapper div, works properly. knowledge of css not sufficient understand why works.
i use 2 wrappers when working owl carousel. i'd set styles per-slide height/width etc , outer wrapper i'd set stage width etc.
i call owl carousel on inner wrapper , have 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>
Comments
Post a Comment