Such a problem:
I connected Owl-Carousel successfully to the site. I have it installed in the entire computer screen (w: 100%; h: 100%), but when I open the side menu and change the width of the owl, the size of .owl-stage and .owl-item remains unchanged because there is a fixed width (in pixels).

I noticed that the fixed width changes when opening the code inspector or when the browser's screen width changes -> i.e. the width is recalculated.

autowidth:true does not help (

You need some kind of рефрешер in js, but which did not reload the whole page, but simply forced Owl to recalculate the width

UPD : I found an approximate solution on the Internet - use refresh.owl.carousel

I wrote the code, but it works with 2 clicks:

 $('.menu_hamburger').click(function(){ owl.trigger('refresh.owl.carousel'); });

Initially: enter image description here

After opening the menu:
enter image description here

After opening the page inspector: enter image description here

After closing the menu: enter image description here

  • Isn't this sidebar fixed or absolute? - Arsen
  • I forgot to describe the fixed sidebar menu, but when opening the menu, the owl-carousel changes the width from 100% to 80: - Antonio112009

2 answers 2

Without looking specifically at the live site, I can offer only a crutch. Hang up on closing the menu this

 $('.menu_hamburger').click(function () { $('.owl-item').css('width',$(document).width()); $('.owl-stage').css('width',$(document).width() * $('.owl-item').length); });
  • Now check. I'm with js on you, so I understand that it is easy. - Antonio112009
  • It did not help (( $('.menu_hamburger').click(function () { console.log("works"); $('.owl-item').css('width',$(document).width()); }); - Antonio112009
  • width owl-item in the inspector does not change? - boneskhv
  • Yes, but the trick there is that you need to change the width and translate3d from the .owl-stage. Maybe there is some kind of imitation of changing the screen size to zero? Then owl recalculates the width by itself - Antonio112009
  • Yes - it changes, or yes - it does not change? owl-stage (as I understand it is the total width of all slides) can also be changed (in the answer I gave the code how to do it). As for translate3d, then there is not fully visible on the screen what it is. - boneskhv

Solved a problem with refresh.owl.carousel . This is a crutch, but at least it works.

  $(document).ready(function () { var $owl = $('.owl-carousel').owlCarousel({ items: 1, // autoWidth:true, loop:true, dots: false, autoplay:true, autoplayTimeout:10000 // autoHeight:true }); $('.menu_hamburger').click(function () { setTimeout(function() { $owl.trigger('refresh.owl.carousel'); }, 390); //390 - это время закрытия/открытия бокового меню }) });