Carousel Owl - Auto Width, the last item is pulled out of the stack.

Question

I am having a strange problem with OWL CAROUSEL 2. I am creating a simple carousel for 12 tables, but when using the "autoWidth" option, the last table is pulled from the carousel stack.

Demo

If you open the violin, there will be a carousel for every month of the year. There is no December at the end of the carousel, but if you check the source code, you will see that December is. For some reason, the OWL carousel plugin pulls out December.

Any ideas? Thanks in advance!

Answer 1

Add only the flex mapping in CSS for the .owl-stage class, and also add the jS function for small 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 also ran into this problem. I fixed it badly, but it works. in both browsers. The problem was the owl-stage element. The owl-carousel lib has counted the width property, but objects do not fit into the wrapper. So I have to call the function after the init event and add 100px to it. I used the setTimeout function with this. A very bad approach that I know, but there are a lot of js functions in my project, and the correct width property is not always obtained (sometimes I get undefined )

So the code:

 $('.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 am sure that it could work without setTimeout , but the timing cannot wait (* bad for itself).

Hope this helps!