CODEWITHSUNDEEP
jqueryhtmlcsscarouselowl-carousel
SirInfant
SirInfant

Reputation: 323

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

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!

Upvotes: 8

Views: 17070

Answers (3)

Ahmed Ibrahim
Ahmed Ibrahim

Reputation: 23

I found a solution for this by refreshing the Owl Carousel after being initiated. Using the following syntax

YourCarouselName.trigger('refresh.owl.carousel');

here's an example of the whole code

var YourCarouselName = $('.YourOwlCarouselClassName').owlCarousel({
    margin:5,
    loop:false,
    dots:false,
    nav:false,
    autoWidth:true,
    afterInit: setWidth()
});
function setWidth(){
    setTimeout(()=>{YourCarouselName.trigger('refresh.owl.carousel');},1);
}

Solution inspired from cs.matyi 's answer on this question

Upvotes: 0

Ishvar Akhaja
Ishvar Akhaja

Reputation: 83

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

Upvotes: 4

cs.matyi
cs.matyi

Reputation: 1264

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!

Upvotes: 1

Related Questions