How to remove the error "Cannot read property 'unslick' of undefined" when initializing slick slider?

Question

JavaScript

There was a task to initialize the slick slider on screens less than 500px, respectively, on screens greater than 500px, turn it off.
Found this solution:

$(window).on("load resize", function(){
    var width = $(document).width();
     
    if (width > 500) { 
      $('.profit-row, .plan-row,  .teachers-slider').slick('unslick');
    } else { 
      $('.profit-row, .plan-row, .teachers-slider').not('.slick-initialized').slick({  
        slidesToShow: 1, 
        slidesToScroll: 1, 
        infinite: true,
      });
    }
  });

Before that, I connected all the necessary slider files:

<link rel="stylesheet" href="slick/slick.css"/> 
<link rel="stylesheet" href="slick/slick-theme.css"/>
 <script src="slick/slick.min.js"></script>

+jquery.
During initialization, the console gave an error

. In slick's docs, it is indicated that to disable the slider, you must write the construction: $('.your-slider').slick('unslick');
, it is written in the example above.
How to fix this error and configure the slider to turn on and off according to. screen width?

Answer 1

Disable the slider only where it is enabled:

$('.profit-row, .plan-row, .teachers-slider').filter('.slick-initialized').slick('unslick');