如何自动设置光滑轮播的高度

Posted 2023-05-07

【中文标题】如何自动设置光滑轮播的高度

【英文标题】：How to automatically set height of slick carousel

【发布时间】：2016-12-02 10:30:44

【问题描述】：

我正在使用光滑的花盘进行测试。我目前正在硬编码幻灯片的高度：

<div class="slides">
    <div>slide a</div>
    <div>slide b</div>
    <div>slide c</div>
</div>

CSS：

.slides 
    height: 200px;

不过，我希望轮播自动成为最高幻灯片的高度。有没有办法做到这一点？

【问题讨论】：

我认为这样做的问题在于，当您在内部有未定义高度的图像时，您必须等待它们被加载，然后再设置高度。这对用户来说是可见的，比如闪烁......

【参考方案1】：

$('.class').slick(
adaptiveHeight: true
);

添加adaptiveHeight 设置图片的自动高度

【讨论】：

在我的情况下似乎不起作用。我的幻灯片主要包含文本，这可能就是原因。也许adaptiveHeight 只适用于图片？

谢谢！适合我）

也适用于 mee，使用文本 + 图像作为内容 @Sam Lee！

【参考方案2】：

.slick-slide 
  height: 0px!important;
 
 .slick-slide.slick-active 
    height: 100% !important;  
 

以上 CSS 可能会有所帮助