垂直 Slick 滑块的自适应高度

Question

我有一个垂直方向的光滑滑块：

$('.slider').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: false,
  dots: false,
  infinite: false,
  centerMode: true,
  vertical: true,
  focusOnSelect: true
});

.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;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
	  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

  
<div class="slider">
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, alias.
    </p>
    
    <img src="https://dummyimage.com/300x150/ccc/fff&text=img-1" alt="">
  </div>
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, alias.
    </p>
    
    <img src="https://dummyimage.com/300x150/ccc/fff&text=img-1" alt="">
  </div>
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, alias.
    </p>
    
    <img src="https://dummyimage.com/300x150/ccc/fff&text=img-1" alt="">
  </div>
  <div>
    <p>
      Lorem ipsum dolor sit amet , consectetur adipisicing elit. Voluptatum, alias.
    </p>
    
    <img src="https://dummyimage.com/300x150/ccc/fff&text=img-1" alt="">
  </div>
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, alias.
    </p>
    
    <img src="https://dummyimage.com/300x150/ccc/fff&text=img-1" alt="">
  </div>
</div>

每个单元格包含一个图像。图像被隐藏 ( .slick-slide. img { display: none; })。如果选择一个块，图像应该出现（.slick-slide.slick-current img { display: block; }）。

但滑块无法正常工作。

如何修复滑块？

Answer 1

计算最高的幻灯片并为其他子项设置顶部/底部边距。

var maxHeight = -1;
$('.slick-slide').each(function() {
  if ($(this).height() > maxHeight) {
    maxHeight = $(this).height();
  }
});
$('.slick-slide').each(function() {
  if ($(this).height() < maxHeight) {
    $(this).css('margin', Math.ceil((maxHeight-$(this).height())/2) + 'px 0');
  }
});