圆滑的轮播 - 删除底部边距时遇到问题

Question

我正在尝试使用 Slick 和 flexbox 构建全屏、响应式、3 幻灯片轮播。

每张幻灯片看起来像这样：

<div class="carousel-slide">
    <div class="carousel-yellow flexbox-column flexbox-space-between">
       <div class="title-container flexbox-column flexbox-center">
         <div class="carousel-title">AAA</div>
         <div class="carousel-subtitle">aaa</div>
       </div>
       <img src="img/blabla.gif" class="gif-carousel"/>
    </div>
</div>

单独拍摄每张幻灯片都有很好的布局，但我一打电话就

$('.intro-carousel').slick({
  arrows:false,
  infinite:false,
  slidesToShow: 1,
  slidsToScroll: 1,
})

幻灯片不再全屏，每张幻灯片的底部都有一个白条。

我已经尝试过 min-height 和 min-width 以及许多其他东西，但都没有成功。

这是一个JSFiddle

Answer 1

使用基于视口的单位而不是百分比：

.carousel-slide {
  height: 100vh;
}

圆滑的轮播 - 删除底部边距时遇到问题

Slick carousel - trouble removing bottom margin

html

css

jquery

flexbox

slick.js