Почему слайдер owl перепрыгивает на вторую строку?

Question

[chelnokov_a]

Добрый.
Возникла такая проблема. В целом слайдер работает хорошо. Однако если сделать масштаб экрана 80% то возникает вот такой эффект



Один из слайдов перескочил на вторую строку

Вот ссылка mc-stellazhi.ru

Вот код слайдера

// Слейдер стелажи популярные
	$(document).ready(function(){
		$('.global-slider__trac-hkf').owlCarousel(
			{
				margin:30,
				items: 4,
				nav: false,
				loop: true,
				dots: false,
				autoWidth: true,
			}
		)
		$('.slider-btn-prev-hkf').click(function() {
			$('.global-slider__trac-hkf').trigger('prev.owl.carousel', [300]);
		})
		$('.slider-btn-next-hkf').click(function() {
			$('.global-slider__trac-hkf').trigger('next.owl.carousel');
		})

	});

Comments

[sergski]

допишите .owl-stage {display: flex;}

Answer 1

[Vladimir Abdullaev]

Уберите все
margin-right: 30;
у карточек.

Используйте

display: flex;
justify-content: space-between;

для родителя.

Sreenshot

Comments

[Diversia]

Описанного выше решение не решает проблему:

.owl-stage {
	display: flex;
	justify-content: space-between;
}

Это работает только на части устройств ПК. На ТВ устройствах происходит нарушение построения слайдера, не учитываются размеры div и получается гармошка, т.е. наслоение картинок или слоев друг на друга по горизонтали.