Why does owl-carousel images resize on page reload?

Question

css

The page has an owl-carousel slider that contains images.
If I press ctrl + R (reload the page) then the size of the images changes, they become large. This happens in all browsers. It also happens when I go to the same page, if I click on the link
How can I fix this?

Desired result: Carousel and images do not resize on
page reload Current Result: Images resize on page reload

Video

HTML:

<div class="slider">
        <div class="owl-carousel">
            <div><img class="slide-img" th:src="@{/images/slider/Controller 1.jpg}" alt="slider img"></div>
            <div><img class="slide-img" th:src="@{/images/slider/Controller 2.jpg}" alt="slider img"></div>
            <div><img class="slide-img" th:src="@{/images/slider/Controller 3.jpg}" alt="slider img"></div>
            <div><img class="slide-img" th:src="@{/images/slider/Controller 4.jpg}" alt="slider img"></div>
            <div><img class="slide-img" th:src="@{/images/slider/Controller 5.jpg}" alt="slider img"></div>
            <div><img class="slide-img" th:src="@{/images/slider/Controller 6.jpg}" alt="slider img"></div>
            <div><img class="slide-img" th:src="@{/images/slider/Controller 7.jpg}" alt="slider img"></div>
            <div><img class="slide-img" th:src="@{/images/slider/Controller 8.jpg}" alt="slider img"></div>
            <div><img class="slide-img" th:src="@{/images/slider/Controller 9.jpg}" alt="slider img"></div>
            <div><img class="slide-img" th:src="@{/images/slider/Controller 10.jpg}" alt="slider img"></div>
        </div>
    </div>

CSS:

.slider {
    margin: 0 auto;
    width: 700px;
}

Owl Carousel settings:

$(document).ready(function () {
    $(".owl-carousel").owlCarousel({
        loop: true,
        autoplay: true,
        animateOut: 'fadeOut',
        items: 1,
        center:true,
        dots: false,
        autoplayTimeout: 3000
    });
});