Owlcarousel2: Item Width Problem

[KaiBroenstrup]

Hi,
i am using the carousel with Item: 1 and large Images in each slide. The Images are 1600px in width. I dont know why but on reload the items are getting the wrong width. 15px too small. When i then resize the browsers window the slides get the correct width. And after i hit F5 - again 15px too small.

Any idea why that happens?

thx

[KaiBroenstrup]

I think somehow the script thinks there is a scrollbar (15px width) and so the items are 15px to small. If i only have 1 slide everythink is calculated correctly.

[KaiBroenstrup]

And here is a demo:
http://www.kaibroenstrup.com/work/demo/

Make your browser smaller than 1600px x 1500px and then hit Reload and you will see the gap on the right (15px). On Resize of the browser the Slide width is correct and after hitting F5 its wrong again.

[cheeminjun]

Hi there, any solution to this? I'm having similar issue, but only with a carousel that's inside a div that's hidden by default. Once said div is showing, the carousel has wrong width for .owl-stage and .owl-item, but upon resizing browser, everything will look good. Hit refresh and same issue occurs.

[rubaff]

Same issue here and desperately waiting for a solution :) Any help is appreciated!

[chmartinez]

Same issue here.. Is there any way to "trigger" a resize so the responsive configuration can take effect? It could be a workaround..

[lukebranch]

+1

[mike-source]

I believe this is the same issue as this: https://github.com/smashingboxes/OwlCarousel2/issues/461

(workaround and suggested fix in link)

[coffeeneed]

Same problem, I think?!
I have a similar bug. For me the width of the scrollbar is overlapping the owl carousel, making only 95% (ish) of the image visible. If I set a fixed with, for example 400px, on the carousel, everything looks alright. I really need some help getting this solved. Anyone?

[coffeeneed]

For me it's strange;
I resize browser to "mobile" and then refresh page (with scroll). The image is then smaller on the right side than on the left and thus is overlapped by my white background.

If I add lots of dummy text in the bottom of the page making the page even taller, this bug disappears.

[hoangthanhhien]

I think this is good solution for this issue at currently:

1. Add a wrapper class to wrap owlcarousel:

<div class="owl-wrapper">
    <div class="owl-carousel">
        ...
    </div>
</div>

1. Add bellow js to calculate owl-wrapper width and set owl-carousel width

    // set owl-carousel width equals to owl-wrapper width
    function owlWrapperWidth( selector ) {
      $(selector).each(function(){
        $(this).find('.owl-carousel').outerWidth( $(this).closest( selector ).innerWidth() );
      });
    }

    // trigger on start and resize
    owlWrapperWidth( '.owl-wrapper' );
    $( window ).resize(function() {
      owlWrapperWidth( $('.owl-wrapper') );
    });

   // then trigger owl Carousel
   $('.owl-carousel').owlCarousel({...});

• Note: This method is not perfect, especially when I'm working with flexbox but in general it works.
  Please do some tests and let me know it really work for you or not?

[coffeeneed]

@sonictemplates this worked like a charm :) Thanks for the good work and quickfix. Anyone got an idea when or if this will be fixed officially?

[kuldipem]

@sonictemplates, this works fine....thanks

[sunilkjt]

@sonictemplates thanks for the solution

[gNesh01]

@sonictemplates, this just partially solve the problem.

Yes, scroll bar disappear BUT width of carousel is less for scrollbar.

eg.
width of wrapper is 700px + 20px scrollbar = 720px
without this fix, width of carousel will be 720px BUT it will have wrong item with

so we use this fix, we have right item width, we dont have scroll BUT width of carousel is 700px not 720px

My fix was to set wrapper height or you can use this fix and set carousel in the middle with
margin: 0 auto and you will get: 10px - 700px - 10px

[AsifAnik]

Init owl carousal on $(window).load() function.

$(window).on('load', function (){
$('.owl-carousel').owlCarousel({...});
});

It fix my problem.

[honsa]

did not help here, is there a easy way to re-initialize the carousel

[bisnismaster]

@AsifAnik using window load function solve my problem.. thank you very much!

[AsifAnik]

@bisnismaster you're very most welcome :)

[Canavell]

@AsifAnik thank you very much! it works for me

[nguyentrithuc]

@AsifAnik window on load is the perfect solution I can found. It works like a charm!

[prashantvictory]

@AsifAnik awesome fix, window.load worked really well, thanks :)

[javalos-giraldo]

What's supposed to be in the three dots? The initialization of owl-carousel?

[harshvardhanmalpani]

Try this
window.dispatchEvent(new Event('resize'));

[AsifAnik]

@156javalos three dots means the options of owl carousel goes there.

[ViacheslavBurlaka]

@AsifAnik you help me a lot. THX :)

[MichelBeaubien]

@hoangthanhhien
THANKS!

[foxartbox]

Same problem. Solved:

Use
$(window).on('load', function () {....

not
$(function() {....