Having Trouble with Owl Carousel Width in initial load

Question

I am working on owl-carousel. Currently I have a problem that my slider width is acting really bad.

When I load/refresh the website, owl-carousel has some value in width, but a part of the next slide is visible (I want to avoid that). At the same time after the initial load when I resize the window (toggle maximize, or change the width or height by dragging) it sets the width to the correct value as I wanted. I don't understand why it's happening. I want to prevent that habit in the initial load.

Here is my jQuery.

function newsSlider() {
  $('.news-slider .owl-carousel').owlCarousel({
  autoplay: true,
  autoplayHoverPause: true,
  dots: true,
  loop: true,
  margin: 5,
  items: 3,
  responsive: {
    0: {
      items: 1,
    },
    768: {
      items: 2,
    },
    992: {
      items: 3,
    }
  }
 });
}

Cindelyn

#27006739 and #32462430 might help you. – Pseudoscope

@Pseudoscope Thank you for your comment. Aleady I have gone through the questions .One of the question about doesn't answered and one got answered. As the reason said in the answer I have my js inside document.ready and I have no container that isn't visible on loading ( You can inspect the site and see ) – Cindelyn

Answer 1

Managed Solve the issue by setting fixed width. I know it's a bad practice. If anyone can come up with a proper way to solve this, you are welcomed. Thank you.

Cindelyn

Answer 2

I fixed this problem when I measured the width of the owl-stage container in a working state. And then set the values in the styles like:

#photo-gallery .owl-stage {
  min-width: 10317px;
}

Monia