title: Slick slider not being responsive when resizing the window
body: <p>I have created a image slider in WordPress using slick slider. I am using center mode I want one image centered with one on each side slightly showing. But I am having a few problems. Firstly when I resize the window slick slider doesn't calculate the new image widths until I interact with the slider, this is problem is not present in the demo. Secondly the images on each side aren't showing like they should.</p>
  
  <p><a href="https://codepen.io/Reece_Dev/pen/xLQwEb" rel="noreferrer">https://codepen.io/Reece_Dev/pen/xLQwEb</a></p>
  
  <pre class="lang-js prettyprint-override"><code>$('.carousel').slick({
    centerMode: true,
    centerPadding: '0px',
    slidesToShow: 1,
  });
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#container{
    width: 100%;
  }
  
  .slick-slide img{
      width: 80%;
      height: auto;
      max-width: 2000px;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"&gt;&lt;/script&gt;
  &lt;link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="container"&gt;
    &lt;div class="carousel"&gt;
      &lt;div&gt;&lt;img src="http://fyberproperty.co.uk/wp-content/uploads/2017/04/stairs_one2200.png"&gt;&lt;/div&gt;
      &lt;div&gt;&lt;img src="http://fyberproperty.co.uk/wp-content/uploads/2017/04/stairs_two2200.png"&gt;&lt;/div&gt;
      &lt;div&gt;&lt;img src="http://fyberproperty.co.uk/wp-content/uploads/2017/04/stairs_one2200.png"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>