title: Adaptive Height for vertical Slick slider
body: <p>I have a <a href="http://kenwheeler.github.io/slick/" rel="noreferrer">slick slider</a> with a vertical orientation:</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>$('.slider').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: false,
    dots: false,
    infinite: false,
    centerMode: true,
    vertical: true,
    focusOnSelect: true
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slider {
    background: #eee;
    margin: 1rem;
  }
  
  .slick-vertical .slick-slide {
    cursor: pointer;
    padding: 1rem;
  }
  
  .slick-vertical .slick-slide:hover {
    background: #ddd;
  }
  
  .slick-vertical .slick-slide img {
    display: none;
    margin: 0 auto;
  }
  
  .slick-slide {
    border: 1px solid #ccc;
    text-align: center;
  }
  
  .slick-vertical .slick-slide.slick-current img {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-2.1.4.js"&gt;&lt;/script&gt;
     
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"&gt;&lt;/script&gt;
  
    
  &lt;div class="slider"&gt;
    &lt;div&gt;
      &lt;p&gt;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, alias.
      &lt;/p&gt;
      
      &lt;img src="https://dummyimage.com/300x150/ccc/fff&amp;text=img-1" alt=""&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;p&gt;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, alias.
      &lt;/p&gt;
      
      &lt;img src="https://dummyimage.com/300x150/ccc/fff&amp;text=img-1" alt=""&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;p&gt;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, alias.
      &lt;/p&gt;
      
      &lt;img src="https://dummyimage.com/300x150/ccc/fff&amp;text=img-1" alt=""&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;p&gt;
        Lorem ipsum dolor sit amet , consectetur adipisicing elit. Voluptatum, alias.
      &lt;/p&gt;
      
      &lt;img src="https://dummyimage.com/300x150/ccc/fff&amp;text=img-1" alt=""&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;p&gt;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, alias.
      &lt;/p&gt;
      
      &lt;img src="https://dummyimage.com/300x150/ccc/fff&amp;text=img-1" alt=""&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Each cell contains an image. Images are hidden (<code>.slick-slide. img { display: none; }</code>). If select a block, the image should appear (<code>.slick-slide.slick-current img { display: block; }</code>).</p>
  
  <p>But the slider doesn't work correctly.</p>
  
  <p>How can I fix the slider?</p>