Задать вопрос
@postya

Почему изменяется размер изображений в owl-carousel при перезагрузке страницы?

На странице имеется слайдер 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
    });
});
  • Вопрос задан
  • 117 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы