javascript - 如何根据内容调整 Flickity 轮播的高度？

Question

我正在尝试名为 Flickity 的组件， super 酷，但问题是轮播高度在CSS中是硬定义的，并没有采用carousel-cell中内容的高度。我尝试使用选项 setGallerySize: false 但它不起作用。

我有一个移动设备优先的网站，内容会根据设备缩小，我希望 Flickity 轮播与内容高度相匹配。

请问您有什么解决办法吗？ 非常感谢

桌面渲染(见卡片下方的空间):

移动 View 渲染(见卡片下方的空间):

Answer 1

在没有看到代码的情况下，我无法真正建议如何更改 flickity css，但我建议将容器上的 padding-bottom 或 flickity 内容上的 margin-bottom 从百分比 (%) 更改为像素 ( px) 如果你想让它保持不变。

如果您反对使用像素，请尝试使用@media 查询来减少容器 div 在移动设备上显示时的底部填充:

<style>
.container {
    padding-bottom: 10%;
}
@media screen and (max-width: 500px) { //replace max-width if too high or low
    .container {
        padding-bottom: 5%;
    }
}
</style>

<div class="container">
//content
</div>