Почему не меняется значение свойств в owl.carousel?

Question

[Unknown]

Привет!
Почему не меняется значение свойств при изменении ширины окна браузера?

$('.right-table').owlCarousel({
	loop: false,
	responsive: {
		1200: {
			items: 8,
			nav: false,
			mouseDrag: false,     // - деактивировать это свойство когда окно 1200px 
			touchDrag: false,
		993: {
			items: 8,
			mouseDrag: true,  // -  и активировать его когда окно 993px 
			touchDrag: true,
	}

Но почему-то этот код не работает. Пробовал дополнять объект событием onResize: function(){ refresh.owl.carousel;}, но и это не помогло.

Но на самом деле моя цель полностью (или частично) избавиться от действия плагина при разрешении 1200px, если вы знаете способ лучше то прошу изложить его ниже.
Спасибо!

Answer 1

[tyzberd]

вы потеряли скобки

responsive : {
    // breakpoint from 0 up
    0 : {
        option1 : value,
        option2 : value,
        ...
    },
    // breakpoint from 480 up
    480 : {
        option1 : value,
        option2 : value,
        ...
    },
    // breakpoint from 768 up
    768 : {
        option1 : value,
        option2 : value,
        ...
    }
}

Если нужно полностью избавиться от действия плагина, тогда в зависимости от ширины экрана инициализировать плагин. Так же написать функцию которая при ресайзе будет проверять размер окна и выполнять destroy.owl.carousel или инициализацию

Comments

[Unknown]

вы потеряли скобки

Дело не в скобках, я просто не весь скрипт залил
вот весь (есть еще, но там тоже самое)

$('.right-table').owlCarousel({
	loop: false,
	margin: 0,
	nav: true,
	navText: false,
	responsive: {
		0: {
			items: 2,
			onChanged: function(event) {
					if(event.item.index <= 0) {
							$('.column-shadow-right').addClass('disabled');
							$('.column-shadow-right').removeClass('show-shadow');
							$('.column-shadow-left').addClass('disabled');
							$('.column-shadow-left').removeClass('show-shadow');
					}
				}
		},
		1200: {
			items: 8,
			nav: false,
			mouseDrag: false,
			touchDrag: false,
			onChanged: function(event) {
					if(event.item.index <= 0) {
							$('.column-shadow').addClass('disabled');
					}
				}
		},
		993: {
			items: 8,
			mouseDrag: true,
			touchDrag: true,
			onChanged: function(event) {
					if(event.item.index <= 0) {
							$('.column-shadow-right').addClass('disabled');
							$('.column-shadow-right').removeClass('show-shadow');
							$('.column-shadow-left').addClass('disabled');
							$('.column-shadow-left').removeClass('show-shadow');
						}
					}
				},
.....
});

если destroy.owl.carousel, тогда контент не появляется

[tyzberd]

если destroy.owl.carousel, тогда контент не появляется

еще классы нужно удалять, типа так
$owl.trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
https://stackoverflow.com/questions/25339836/how-t...