title: How can I set slick.js settings base on my windows size (Desktop, Tablet, Phone)?
body: <p>I have a bunch of custom of HTML divs. I store <strong>3</strong> of them in a div with class <strong>slide</strong>. Then, I use that slide class to call the <strong>slick</strong> function and apply the settings like this: </p>
  
  <pre><code>$('.slide').slick({
  
      slidesToShow: 3,
      slidesToScroll: 1,
      arrows: true,
  
  });
  </code></pre>
  
  <p>For those of you that don't know, here is <a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">slick.js</a>.</p>
  
  <p>My whole UI at this point look like this: </p>
  
  <p><img src="https://i.stack.imgur.com/xRqd6.png" alt="enter image description here"></p>
  
  <p>They look fine when they're in full-screen, but as soon as I decrease the windows size, they look very poor. I'm thinking to set my slick settings base on my windows size. For example, </p>
  
  <pre><code>If window size = full OR 1080px {
  $('.slide').slick({
  
          slidesToShow: 3,
          slidesToScroll: 1,
          arrows: true,
  
      });
  
  }
  
  else if window size = medium or 720px {
  $('.slide').slick({
  
          slidesToShow: 2,
          slidesToScroll: 1,
          arrows: true,
  
      });
  
  
  }else{
  
  
  // This is for the phone
  
  $('.slide').slick({
  
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows: true,
  
      });
  }
  </code></pre>
  
  <p>What is the most efficient way to do achieve something like this?</p>
  
  <p>Here is my <a href="http://jsfiddle.net/bheng/va5qkycp/1" rel="nofollow noreferrer">JSFiddle</a>.</p>