垂直滑动条的自适应高度 [英] Adaptive Height for vertical Slick slider

问题描述

我有一个滑动滑块，其垂直方向:

I have a slick slider with a vertical orientation:

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

Each cell contains an image. Images are hidden (.slick-slide. img { display: none; }). If select a block, the image should appear (.slick-slide.slick-current img { display: block; }).

但是滑块无法正常工作.

But the slider doesn't work correctly.

如何固定滑块?

推荐答案

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

Calculate the heighest slide and set a top/bottom margin for other children.

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

这篇关于垂直滑动条的自适应高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！