На странице имеется слайдер owl-carousel, в котором имеются изображения.
Если нажму ctrl + R (перезагрузка страницы) то размер изображений меняется, они становятся большими. Так происходит на всех браузерах. Также это происходит при переходе на эту же страницу, если кликну на ссылку
Как это можно исправить?
Желаемый результат: при перезагрузке страницы размер карусели и изображений не меняется
Текущий результат: при перезагрузке страницы размер изображений меняется
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 настройки:
$(document).ready(function () {
$(".owl-carousel").owlCarousel({
loop: true,
autoplay: true,
animateOut: 'fadeOut',
items: 1,
center:true,
dots: false,
autoplayTimeout: 3000
});
});