我有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; }
)。如果选择一个块,则应显示图像(.slick-slide.slick-current img { display: block; }
)。
但是滑块无法正常工作。
如何修复滑块?
答案 0 :(得分:2)
计算最深的幻灯片并为其他孩子设置上下边界。
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');
}
});