圆滑的转盘-强制滑动具有相同的高度

问题描述

我遇到了带有多个 slidesToShow 且高度不同的Slick轮播JS插件的问题.

I'm having trouble with the Slick carousel JS plugin with multiple slidesToShow which have different heights.

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

I need the Slides to have the same height, but with CSS flex-box it doesn't work as the slides have conflicting CSS definitions.

此外，我在论坛和网络上都找不到有用的东西.

Also, I didn't find anything useful in the forums and on the web.

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样式即可使用:

Add a couple of CSS styles and it will be ready:

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

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

享受！:-)

这篇关于圆滑的转盘-强制滑动具有相同的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！