Slick Slider not loading properly on a hidden div

Question

Title is pretty self explanatory.

I'm creating a website in a single HTML file, where different pages are just divs that go from display:none to display:block, according to an onclick function. In one of those pages I want to use a Slick Slider. Unfortunately, the Slider doesn't load 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?

Here's the Fiddle (sorry that it probably has more code lines than it needs). The relevant CSS is at the end and the relevant javascript is well identified.

https://jsfiddle.net/Santos1600/9xv67aL8/

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. This is still a work in progress...just random divs with gray background.

Answer 1

Slick.js cannot figure out the width of the slides if you initialize your slideshow while your slide elements are hidden, so it sets the width to zero. One solution is to refresh your Slick instance once you reveal your slideshow. In your case:

function SwapDivsWithClick(div1, div2) {
  var d1 = document.getElementById(div1);
  var d2 = document.getElementById(div2);
  if (d2.style.display == "none") {
    d1.style.display = "none";
    d2.style.display = "block";
  } else {
    d1.style.display = "block";
    d2.style.display = "none";
  }

  // Refresh slideshow when Episodios is revealed
  if (div2 === 'episodios') {
    $(".postwrapper").slick("refresh");
  }
}

JS Fiddle: https://jsfiddle.net/vhoejgum/

More information about the slick.js issue: https://github.com/kenwheeler/slick/issues/235