jquery - 垂直 Slick slider 的自适应高度

Question

我有一个 slick slider垂直方向:

$('.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; })。如果选择一个 block ，图像应该出现 (.slick-slide.slick-current img { display: block; })。

但是 slider 不能正常工作。

如何修复 slider ？

Answer 1

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

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');
  }
});