Only use slick.js on mobile screen size

Question

I only want the slick.js plugin to be active when on a mobile screen size, let's say under 450px for example. I want this to happen on either page load or browser resize. Slick.js does work properly if I load the page or resize to the correct width but not if I resize the browser to greater than 450px. Can this be done?

   $(document).ready(function(){
    $(window).resize(function(){
      if($(window).width() < 450) {
        $('.round-card-slick').slick({
        });
      } else {
        $('.round-card-slick').unslick();
      }
    });
  }); 

Solution 1

The problem is unslick keeps firing on resize even after it has been unslicked, which in turn, breaks it. A work around that my coworker came up with goes like this check..

var target = $('.slick-mobile-gallery');
if(target.hasClass('slick-initialized'))
  target.unslick();

Update:

The solution is built-in feature in slick plugin & @James Daly's answer is the true answer to this question.

Solution 2

btw now you can do this directly in the slick responsive settings object

mobileFirst: true, 
responsive: [
   {
      breakpoint: 480,
      settings: "unslick"
   }
]