光滑的旋转木马力滑梯具有相同的高度

小开

好了，伙计们，我找到了一个简单的解决办法。只需添加一个 setPosition回调函数(在位置/大小变化后触发) ，将幻灯片的高度设置为幻灯片的高度(slideTrack) :

JS

$('.slider').slick({
autoplay: false,
dots: false,
infinite: false,
arrows: false,
slidesToShow: 2,
slidesToScroll: 2,
rows: 0
})
.on('setPosition', function (event, slick) {
slick.$slides.css('height', slick.$slideTrack.height() + 'px');
});

不要忘记你的幻灯片需要有足够的高度:

CSS

.slide {
height: 100%;
}

下面是一个小 jsFiddle 来演示: Https://jsfiddle.net/jjaun/o29a4q45/

小开

我有另一个只有 css 的解决方案。你可以覆盖浮动的元素与 table/table-cell。

$(function() {
$('.slider')
.slick({
autoplay: false,
dots: false,
infinite: false,
arrows: false,
slidesToShow: 2,
slidesToScroll: 2,
rows: 0
});
})

.slide {
background-color: #ccc;
padding: 10px;
display: table-cell !important;
float: none !important;
}


.slick-track {
display: table !important;
}

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




<div class="slider">
<div class="slide">
<p>Lorem ipsum.</p>
</div>
<div class="slide">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
</div>
<div class="slide">
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="slide">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>

小开

我已经写了一个快速的 JS 黑客使不同的图像高度画廊看起来更整洁一点。

它的作用如下:

获取滑块实例
找出它的高度-图像的高度将被设置为
获取每个图像的 src attr 并隐藏它

将 src attr 设置为图像的父图像作为背景图像，同时使用一些 CSS。

function equalizeImagesHeight(slider) {
const slides = slider.find('.slick-slide');
const imgHeight = $(slider)[0].clientHeight;
slides.each(function(slide){
const src = $(this).find('img').hide().attr('src');
$(this).css({
backgroundImage:'url('+src+')',
minHeight: imgHeight,
backgroundSize: "cover",
backgroundPosition: "center"
});
});
};

EqualizeImageHeight ($(’. my-slider’)) ;

小开

最佳答案

添加一些 CSS 样式就可以了:

.slick-track
{
display: flex !important;
}


.slick-slide
{
height: inherit !important;
}

享受吧! : -)

小开

来自@JJaun 的 js 解决方案并不完美，因为如果在幻灯片中使用背景图像，就会看到高度跳跃。这对我很有效:

.slick-track {
display: flex !important;
}


.slick-slide {
height: auto;
}

小开

如果你对使用 object-fit感到满意，这里有一个仅支持 SCSS 的解决方案:

.slick {
.slick-track {
display: flex;


.slick-slide {
display: flex;
height: auto;


img {
height: 100%;
object-fit: cover;
object-position: center;
}
}
}
}

小开

上述建议对我不起作用。我的滑块图像是全肖像，但可能有不同的 h/w 宽高比。我用 js 修好了。虽然感觉很难看，但我希望能找到更干净的东西。

$carousel.on('setPosition', function (event, slick) {
const $slideImages = slick.$slideTrack.find('.slick-slide-img');
if($slideImages.first()[0].clientHeight >= $slideImages.first()[0].naturalHeight) return;
$slideImages.height('auto');
$slideImages.width('100%');
const imgHeights = $slideImages.map(function(){
return this.clientHeight;
}).get();
const maxHeight = Math.max.apply(null, imgHeights);
$slideImages.height(maxHeight);
$slideImages.width('auto');
}

我必须使用 setPosition事件，即使代码只需要执行一次，在初始化 slick 之后。init事件不起作用，因为 init 上的图像高度偏离了很远。对于前一个或两个 setPosition 事件也是如此——因此是 if($slideImages.first()[0].clientHeight >= $slideImages.first()[0].naturalHeight) return;。

小开

未来的搜索:

你可以简单地使用:

$('.slick').slick({
/* your config */
}).on('setPosition', function (event, slick) {
slick.$slides.css('height', slick.$slideTrack.height() + 'px');
});

小开

正如上面所回答的。在滑动条上工作得很好

.slick-track
{
display: flex !important;
}


.slick-slide
{
height: inherit !important;
}

但是，我在使用光滑同步导航时遇到了一个问题

简单地把下面的 css 覆盖它。

.slick-slide {
margin-bottom: 0;
object-fit: cover;
}

小开

.slick-track { display: flex; align-items: stretch; }
.slick-slide { height: auto; flex: 1; }
并且，如果您想将最后一个元素放在块的底部，那么将 display: flex作为包装器，将 margin-top: auto;作为最后一个元素

小开

对我来说，最新版本的光滑在2021年光滑保持包装我的项目的与额外的 div

所以我这么做了:

        .slick-track
{
display: flex !important;
height: 100%;
}


.slick-slide
{
height: auto;


.slick-slide> div
{
height: 100%;


.myItemClass
{
height: 100%;
}
}
}

小开

纯 CSS 解

.slick-track {
display: flex;
}


.slick-track .slick-slide {
display: flex;
height: auto;
}


.slick-slide img {
height: 100%;
object-fit: contain;
object-position: center;
}