title: jQuery Slick plugin not resizing after parent resizes
body: <p>I have a project with a collapsable sidebar navigation, with the content filling the remaining space; when the navigation is collapsed, the content fills the whole screen.</p>
  
  <p>I'm using jQuery Slick to display some snippets of text, and for the most part, responsively it works great. However, whenever I toggle the navigation, Slick doesn't respond to the new width of it's parent, showing part of the next slide instead of filling the screen.</p>
  
  <p>What can I do to fix this? </p>
  
  <p>Here is a jsfiddle demonstrating the issue:
  <a href="http://jsfiddle.net/b82x7rr2/" rel="nofollow">http://jsfiddle.net/b82x7rr2/</a></p>
  
  <p>And here's some code:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;div class="wrapper"&gt;
      &lt;p&gt;&lt;a href="#" class="close"&gt;Toggle Navigation&lt;/a&gt;&lt;/p&gt;
  
      &lt;div class="slider"&gt;
          &lt;div&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;p&gt;Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;style&gt; 
      nav{
          width: 300px;
          position:fixed;
          top:0;
          left:0;
          height:100%;
          background:#000;
      }
      .wrapper{
          padding:0 0 0 300px;
          text-align:center;
      }
      p{
          margin:10px;    
      }
      body.active nav{
          display:none;
      }
      body.active .wrapper{
          padding:0;
      }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
      $().ready(function(){
          $(".slider").slick();
          $(".close").on("click", function(){
              if( !$("body").hasClass("active") ){
                  $("body").addClass("active");   
              }else{
                  $("body").removeClass("active");    
              }
          });
      });
  &lt;/script&gt;   
  </code></pre>