光滑的轮播 - 删除底部边距的麻烦

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;
}