Having Trouble with Owl Carousel Width in initial

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

Answer 1

this did the trick for me

(function ($) {
   // initialize here
})(jQuery);

Answer 2

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.

Answer 3

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