光滑的旋转木马 - 强制幻灯片具有相同的高度

我在使用 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;
}

添加几个 CSS 样式就可以了：

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

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

享受！ :-)