光滑的旋转木马 - 强制滑动以具有相同的高度

Question

我遇到了Slick carousel JS插件的问题,其中有多个slideToShow,它们具有不同的高度.

我需要幻灯片具有相同的高度,但是使用CSS flex-box它不起作用,因为幻灯片具有冲突的CSS定义.

也没有在论坛和网络上找到任何有用的东西.

如果我得到了一些工作,我会在这里发布解决方案.当然,欢迎提出任何建议.

HTML

<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

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

CSS

.slide {
  height: 100%;
  background-color: #ccc;
  padding: 10px;
}

Answer 1

添加几个CSS样式,它将准备好:

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

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

请享用!:-)

Answer 2

好的,我找到了一个简单的解决方案 只需添加一个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/

Answer 3

@JJaun 的 js 解决方案并不完美，因为如果您使用幻灯片的背景图像，您会看到高度跳跃。这对我有用：

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

.slick-slide {
  height: auto;
}

Answer 4

正如上面的回答。在光滑的滑块上工作得很好

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

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

但是，我在使用平滑同步导航时遇到问题

简单地将CSS放在下面来覆盖它。

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

Answer 5

纯css的解决方案

.slick-track {
    display: flex;
}

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

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