問題:
I'm having trouble with the Slick carousel JS plugin with multiple slidesToShow which have different heights.我在使用具有不同高度的多個slidesToShow的 Slick carousel JS 插件時遇到了問題。
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.我需要幻燈片具有相同的高度,但是使用 CSS flex-box 它不起作用,因爲幻燈片具有衝突的 CSS 定義。
Also, I didn't find anything useful in the forums and on the web.另外,我在論壇和網絡上沒有找到任何有用的東西。
HTML 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 JS
$('.slider')
.slick({
autoplay: false,
dots: false,
infinite: false,
arrows: false,
slidesToShow: 2,
slidesToScroll: 2,
rows: 0
});
CSS CSS
.slide {
height: 100%;
background-color: #ccc;
padding: 10px;
}