Как сделать слайдер неактивным на определенных размерах?

Question

[vonsyus]

Доброго времени суток.

Использую Owl Carousel. Мне нужно сделать чтобы при размере окна > 575px owl carousel становилась неактивной

Я смог придумать только дикий костыль, который при изменении размера окна на определенной разрешение перезагружает страницу и всё становится в порядке, но я не могу придумать как это должно работать без перезагрузки. Пробовал делать через стили - не помогает.

Гит: https://github.com/vonsyus/testTaskk, файл owl-slider.js

Место, которое не работает:

И оцените в целом верстку этого проекта.

Спасибо!

Comments

[Kovalsky]

https://stackoverflow.com/questions/28251644/disab... ?

Answer 1

[vonsyus]

let owl7 = $('#owl7');

$(window).resize(function() {
if ($(window).width() <= 575) {
	document.getElementById('owl7').classList.add('owl-carousel');
	owl7.trigger('destroy.owl.carousel');
	owl7.owlCarousel({
		items: 4,
		touchDrag: true,
		margin: 0,
		autoWidth: true
	});
} else {
	document.getElementById('owl7').classList.add('owl-carousel');
	owl7.trigger('destroy.owl.carousel');
	owl7.owlCarousel({
		items: 4,
		touchDrag: true,
		mouseDrag: false,
		margin: 0,
		autoWidth: true
	});
}
});

Answer 2

[r_mustang]

https://owlcarousel2.github.io/OwlCarousel2/docs/a...

initialize и destroy

Comments

[vonsyus]

В том-то и дело, что destroy полностью удаляет со страницы этот элемент, а он должен оставаться на странице

Answer 3

[Adik Izat]

Для этого и существуют options.
1) Отследите событие изменения ширины окна
2) В отслеженном событии переинициализируйте ваш слайдер
3) В опшнс передайте false на все onTouchDrag, onMouseDrag итд. и готово

Comments

[Adik Izat]

не забудьте сделать обратное действие, чтобы при уменьшении экрана происходил обратный эффект и эти опции получали уже true