Owl Carusel при повороте экрана телефона не уменьшает слайды. Как исправить?

Question

[Иван Иванов]

Здравствуйте. Проблема в следующем. Имеется сайт beautydrugs.ru/m/, установлено два owl sliderа один при повороте экрана адаптируется нормально, второй делает слайды просто огромными, и что бы всё заработало надо обновлять страницу. Может кто-то сталкивался?

$(".two").owlCarousel({
		loop:true, //Зацикливаем слайдер
		margin:10, //Отступ от картино если выводите больше 1
		nav:false, //Отключил навигацию
		autoplay:true, //Автозапуск слайдера
		smartSpeed:2000, //Время движения слайда
		autoplayTimeout:4000, //Время смены слайда
		responsive:{ //Адаптация в зависимости от разрешения экрана
			0:{
				items:1
			}
		}
	});

Answer 1

[Любовь Синица]

Попробуйте при событии onResize рефрешнуть его:

var owl = $(".two").owlCarousel({
loop:true,
margin:10,
nav:false,
autoplay:true,
smartSpeed:2000,
autoplayTimeout:4000,
responsive:{
0:{
items:1
}
},
onResize: function() {
owl.trigger('refresh.owl.carousel');
}
});

Comments

[Иван Иванов]

Нет не помогает. Он почему-то делает размер изображения 14к x 8к и каждый rotate гаджета приводит к увеличению размера изображения на эти же значения. Вот пример:

До rotate:



После первого rotate:



После второго rotate:

[Любовь Синица]

К сожалению, не смогла воспроизвести проблему в браузере, на мобильнике вообще все разлетелось (он у меня старый, так что можно не переживать по этому поводу). Попробуйте вместо классов id для каждого слайдера прописать. Или может другой скрипт задевает, поотключайте по одному и методом исключения возможно что то станет понятно.

[Иван Иванов]

Любовь Синица, Я нашёл решение. Проблема была в неправильно разметке. Дело в том что я использовал boostrap и компонет bitrix. Так вот разметку <div class="col-12> надо было вынести за пределы шаблона компонента. Так как если разместить этот див внутри компонента, нарушалась структура сетки boostrap из-за того, что компонет битрикса добавлял свою собственную обёртку. И получалось:

<div class="container-fluid">
    <div class="row">
        <div class="bitrix-wrapper">    <!-- Именно эта обёртка и приводила к таким последствиям -->
            <div class="col-12"></div>       
        </div>
    </div>
</div>

Я вынес <div class="col-12"></div> за пределы шаблона компонента, и всё заработало