title: Slick Slider Width 0 On Initial Page Load
body: <p>I'm running into a really weird issue with a Slick Slider.</p>
  
  <p>Sometimes, on the very first page load the slide and track width are being set to 0.</p>
  
  <p>I've tried many of the solutions out there including:</p>
  
  <ul>
  <li>Setting a timeout and then calling slick</li>
  <li>Triggering a window resize event via JS</li>
  <li>Setting min-height of all slick elements to 1</li>
  <li>Putting the images in a div container</li>
  </ul>
  
  <p>I can't for the life of me figure out how to fix this issue. Any help would be greatly appreciated!</p>
  
  <p><a href="https://www.juice-society.com/products/activated-lemonade" rel="noreferrer">Live example (any product page)</a></p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>    // Slick Slider on Product Page
      $('.slick-carousel').slick({
          slidesToShow: 1,
          slidesToScroll: 1,
          lazyLoad: 'ondemand',
          arrows: false,
          fade: true,
          asNavFor: '.slick-thumbnails'
      });
      $('.slick-thumbnails').slick({
          slidesToShow: 4,
          slidesToScroll: 1,
          asNavFor: '.slick-carousel',
          focusOnSelect: true,
          arrows: false,
          mobileFirst: true,
          responsive: [{
              breakpoint: 768,
              settings: {
                  vertical: true
              }
          }]
      });
  </code></pre>
  
  <p><strong>HTML (Bootstrap 4)</strong></p>
  
  <pre><code>&lt;div class="col-12 col-md-10 col-lg-8 mx-auto order-1 order-md-2 slick-carousel"&gt;
    &lt;div&gt;
      &lt;img class="img-fluid" src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" onload="$(window).trigger('resize')"/&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.slick-thumbnail-container {
      * {
          min-height:0;
      }
  
      flex-direction: row;
      padding: 2rem 0;
  
      .icon {
          font-size: 1.25rem;
          color: $gray-light;
      }
  }
  
  .slick-thumbnails {
  
      * {
          min-height:0;
      }
  
      .slick-slide {
          margin: 0 12px;
      }
  
      .slick-list {
          margin: 0 -12px;
      }
  }
  
  @include media-breakpoint-up(md) {
  
      .product-description-container {
          padding: 2rem;
          border-radius: $border-radius;
          margin: 3rem auto 4rem;
  
          .add-to-cart {
              width: auto;
          }
      }
  
      .slick-thumbnail-container {
  
          * {
              min-height:0;
          }
  
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
  
      }
  
      .slick-thumbnails {
  
          * {
              min-height:0;
          }
  
          .slick-slide {
              margin: 12px 0;
          }
  
          .slick-list {
              margin: -12px 0;
          }
      }
  
      .slick-carousel {
  
          * {
              min-height:0;
          }
  
          display: flex;
          align-items: center;
          padding: 1rem 0 4rem;
          justify-content: center;
          width: 100%;
          max-height: 100%;
  
      }
  
  }
  </code></pre>