CODEWITHSUNDEEP
javascriptjqueryhtmlcssowl-carousel
Vinicius Ottoni
Vinicius Ottoni

Reputation: 4677

Owl Carousel - width is calculated wrong

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.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 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.

Upvotes: 7

Views: 35964

Answers (5)

Disney Land 2017
Disney Land 2017

Reputation: 31

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);

Upvotes: 2

maLikiz
maLikiz

Reputation: 45

it helped me:

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

Upvotes: 3

Michael Litvin
Michael Litvin

Reputation: 4126

Unbelievably, I suspect that this might be a bug within owlCarousel.

What helped me was removing the * 2 in 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.

Upvotes: 0

Anto
Anto

Reputation: 75

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>

Upvotes: 1

crazypsycho
crazypsycho

Reputation: 34

This problem is a known issue. You need to put table-layout: fixed on the table.

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

Upvotes: 0

Related Questions