Owl carousel - auto width, last item is pulled out from stack

Question

i am experiencing strange issue with OWL CAROUSEL 2. I'm creating simple carousel for 12 tables, but when using option "autoWidth", last table is pulled out from carousel stack.

DEMO

If you open fiddle, there is carousel for every month in year. At the end of carousel, there is no December, but if you check source code, you can see that December is there. For some reason OWL carousel plugin is pulling December out.

Any ideas? In advance, many thanks!

Answer 1

Add just display flex in CSS for .owl-stage class and also add jS function for smaller devices.

CSS

.owl-stage{display:flex}

JS

  $('.owl-carousel').owlCarousel({   
   loop: false,   
   autoWidth:true, 
   margin:10,
   nav:true,
   responsive:{
    0:{
     items:1,
     autoWidth:false 
    },
    768:{
     items:3
    }
   } 
 });  

Answer 2

I just ran into this issue too. I fixed it in a bad way, but it is working. in both browsers. The problem was with the owl-stage element. The owl carousel lib counted the width property, but the items doesn't fit in the wrapper. So I have to call a function after the init event happened and add about 100px to it. I used the setTimeout function with this .Very bad approach I know, but in my project there are a lot of js functions happening and not allways get the right width property (sometimes i get undefined )

So the code is:

$('.owl-carousel').owlCarousel({
        margin:90,
        nav:true,
        dots:true,
        autoWidth:true,
        afterInit: setWidth()
    });

    function setWidth(){
        setTimeout(function(){
            var carWidth = $('.owl-stage').width() + 100;
            $('.owl-stage').width(carWidth);
        },200);

    }

I'm sure it could work without setTimeout, but deadlines can't wait (*feeling bad for it).

Hope it helps!