Slick carousel - 强制幻灯片具有相同的高度

Question

我在使用具有多个高度不同的 slidesToShow 的 Slick carousel JS 插件时遇到问题。

我需要幻灯片具有 相同的高度，但使用 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;
}

原文由 JJaun 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

添加几个 CSS 样式，它就准备好了：

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

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

享受！ :-)

原文由 Phoenix 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 JJaun 发布，翻译遵循 CC BY-SA 3.0 许可协议