title: Slick Slider not loading properly on an hidden div
body: <p>Tittle is pretty self explanatory.</p>
  
  <p>I'm creating a website in a single html file, where different pages are just <code>divs</code> that go from <code>display:none</code> to <code>display:block</code>, according to an <code>onclick</code> function. In one of those pages i want to use a slick slider. Unfortunately, the slick slider never loads properly the first time that div is shown. It only comes back to life if i press the next/previous button or if i resize the browser. Is there any way to fix the problem?</p>
  
  <p>Here's the fiddle (sorry that it probably has more code lines than it needs, the relevant css is at the end, the relevant javascript is well identified): <a href="https://jsfiddle.net/Santos1600/9xv67aL8/" rel="nofollow noreferrer">https://jsfiddle.net/Santos1600/9xv67aL8/</a></p>
  
  <p>The progress to get to the slider is: Click on the image below "Sonhar", Open the hamburger Menu, Click on "Episódios", use previous or next button to see how it should load (Still a work in progress, just random <code>divs</code> with gray background at the moment).</p>