Why doesn't the property value in owl.carousel change?

Question

JavaScript

Hey!
Why doesn't the value of the properties change when the width of the browser window changes?

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

But for some reason this code doesn't work. I tried adding an event to the object onResize: function(){ refresh.owl.carousel;}, but that didn't help either.

But in fact, my goal is to completely (or partially) get rid of the plugin's action at a resolution of 1200px, if you know a better way, then please state it below.
Thank you!

Answer 1

you missed the brackets

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,
        ...
    }
}

If you need to completely get rid of the plugin action, then, depending on the screen width, initialize the plugin. Also write a function that, when resized, will check the size of the window and perform destroy.owl.carousel or initialization