Search code examples
owl-carousel-2

Owlcarousel 2 Resizes On Window Resize (edited)

I'm using Owlcarousel 2 but I'm getting a weird glitch. On any type of device, when a resize happend, the items in the carousel change their width to about 3 times the size.

A resize is probably being triggered past a certain point on mobile, which was the original question.

Here's my implementation:

$('.owl-carousel').owlCarousel({
   loop: false,
   margin: 25,
   nav: true,
   items: 1,
   responsive : {
    0 : {
        stagePadding: 10,
          items:1,
    },
    480 : {
        stagePadding: 50,
          items:1,
    },
    768 : {
        stagePadding: 75,
          items:1,
    }
}

});

Here are my screenshots before you scroll past the point and after.

BEFORE (everything working nicely) enter image description here

AFTER (width resized and it's wrong) enter image description here

I've tried putting some limits on the width in CSS, but that has some other effects.

The development URL is this and you can only see the Owl Carousel under 992 pixels.

Link to the site in development

How can I fix this?

Solution

  • In the example you gave, this CSS will fix it:

    #packages_wrapper.mobile{
    width:100%;
}

    The reason why is that Owl sometimes gets confused about what the width of his container is, and we need to add "width:100%" to his parents until Owl can correctly figure it out.