Slider with OwlCarousel 2 displays one slide instead of three

Today I’ve moved OwlCarousel 2 slider with one displayed image from half-a-page block to the full page block. Now it displays one image on full width at the time, even with items set to 3. I need it to display 3 elements at time and slide one-by-one using existing arrows. Moreover, I’ve rewriten owlcarousel settings so much time, so I don’t know the initial state of configuration.
I suppose, it may cause in width, but even when I’ve tried to fix it – nothing happened.

Here are my config and styles:

if (jQuery("body").find(".carousel1")) {
 var elements = jQuery(".carousel1").owlCarousel({
  loop: true,
  margin: 10,
  nav: false,
  dots: false,
  mouseDrag: false,
  touchDrag: false,
  items: 3
}
);
jQuery(".prev1").click(function (types) {
  types.preventDefault();
  elements.trigger("prev.owl.carousel");
});
jQuery(".next1").click(function (types) {
  types.preventDefault();
  elements.trigger("next.owl.carousel");
});
}

And CSS

.owl-carousel .owl-item img {
    display: inline;
}
.carousel1 img {
    height: auto!important;
    width: 100%!important;
}
.owl-carousel .owl-item img {
    height: 500px;
    width: auto;
    max-width: none;
}
/*.owl-carousel .owl-item {
    max-height: 500px;
    padding-bottom: 10px
}*/`

I’ve tried many ways, but when changing owl-item width in Edge Inspector to 1/3 of the initial width – this resulted in partially worked solution – items were displayed by 3, I was scrolling and the got an empty space.