title: Slick element not fully showing after click event
body: <p>I am using the slick slider library. On page load, my slider wrapper is set to <code>display: none</code>. When I click my trigger click button, it then shows the slider, but the first slide doesn't show. Then when the second slide shows, the height isn't correct. </p>
  
  <p>I have read through articles that share my issue, such as this one:</p>
  
  <p><a href="https://github.com/kenwheeler/slick/issues/158" rel="nofollow noreferrer">https://github.com/kenwheeler/slick/issues/158</a></p>
  
  <p>Here is the library:</p>
  
  <p><a href="https://github.com/kenwheeler/slick" rel="nofollow noreferrer">https://github.com/kenwheeler/slick</a></p>
  
  <p>I have tried initializing the slider and then adding <code>visibility: visible</code> to it, but that does not seem to work. </p>
  
  <p>Does anyone see or know what I have to add to get the first slide to fully show after being triggered?</p>
  
  <p><a href="https://jsfiddle.net/ndzf7gx6/1/" rel="nofollow noreferrer">Here is a fiddle which shows the issue I am having.</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#trigger').on('click', function() {
   $('#pg-preview-wrap').show();
  });
  $('#calendar-select').on('init', function() {
    $('#calendar-select').css("visibility", "visible");
    $('.slick-initialized').css("visibility", "visible");
  });
  $('#calendar-select').slick({
    dots: true,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 7000,
    speed: 800,
    slidesToShow: 1,
    adaptiveHeight: true
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#pg-preview-wrap {
    display: none;
  }
  
  #calendar-select {
    width: 50%;
    margin: 0 auto 70px auto;
    background: #CCC;
    visibility: hidden;
    height: auto;
  }
  
  .no-fouc {
    display: none;
  }
  
  .slick-initialized {
    visibility: visible;
  }
  
  .slick-slide img.checkmark-img {
    display: none;
    width: 40%;
    height: auto;
    z-index: 1;
    cursor: pointer;
  }
  
  .slick-slide img.pg-preview-img {
    display: block;
  }
  
  .calendar-option img {
    margin: 20px auto;
    cursor: pointer;
    width: 50%;
    height: auto;
    display: block;
  }
  
  .calendar-option-push {
    width: 0;
    height: 20px;
    border: none;
    margin: 20px auto;
  }
  
  .calendar-option cite {
    text-align: center;
    font-size: 1.25rem;
    margin: auto;
    color: #303030;
    font-family: 'Lato', sans-serif;
    display: block;
  }
  
  .slick-prev,
  .slick-next {
    background-repeat: no-repeat;
    background-size: 120px 120px;
    height: 120px;
    width: 120px;
  }
  
  .slick-prev {
    left: -130px;
    background-image: url("images/arrow-back.png");
  }
  
  .slick-prev:hover,
  .slick-prev:active,
  .slick-prev:focus {
    background-image: url("images/arrow-back.png");
  }
  
  .slick-prev:hover,
  .slick-prev:active,
  .slick-prev:focus,
  .slick-next:hover,
  .slick-next:active,
  .slick-next:focus {
    background-repeat: no-repeat;
    background-size: 120px 120px;
  }
  
  .slick-next {
    right: -130px;
    background-image: url("images/arrow-forward.png");
  }
  
  .slick-next:hover,
  .slick-next:active,
  .slick-next:focus {
    background-image: url("images/arrow-forward.png");
  }
  
  .slick-prev:before,
  .slick-next:before {
    font-size: 0px;
  }
  
  .slick-dots {
    margin: 15px 0 20px 0;
  }
  
  .white-back {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    background: #FFF;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"&gt;&lt;/script&gt;
  &lt;button id="trigger"&gt;Trigger&lt;/button&gt;
  &lt;div id="pg-preview-wrap"&gt;
    &lt;div id="calendar-select"&gt;
      &lt;div class="calendar-option"&gt;
        &lt;div class="product-wrap"&gt;
          &lt;label for="flag-option" class="package-check-toggle"&gt;
            &lt;img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='American Flag' class='pg-preview-img'&gt;
            &lt;p class="calendar-option-push"&gt;&lt;/p&gt;
            &lt;cite&gt;A&lt;/cite&gt;
          &lt;/label&gt;
          &lt;input type="checkbox" class="option-check" id='flag-option'&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="calendar-option"&gt;
        &lt;div class="product-wrap"&gt;
          &lt;label for="nickel-option" class="package-check-toggle"&gt;
            &lt;img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='Brushed Nickel &amp; Black' class='pg-preview-img'&gt;
            &lt;p class="calendar-option-push"&gt;&lt;/p&gt;
            &lt;cite&gt;B&lt;/cite&gt;
          &lt;/label&gt;
          &lt;input type="checkbox" class="option-check" id='nickel-option'&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="calendar-option"&gt;
        &lt;div class="product-wrap"&gt;
          &lt;label for="gold-option" class="package-check-toggle"&gt;
            &lt;img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='Gold &amp; Black' class='pg-preview-img'&gt;
            &lt;p class="calendar-option-push"&gt;&lt;/p&gt;
            &lt;cite&gt;C&lt;/cite&gt;
          &lt;/label&gt;
          &lt;input type="checkbox" class="option-check" id='gold-option'&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>