如何使Flickity旋转木马的高度受到内容的限制?

问题描述 投票:0回答:1

我正在尝试名为Flickity的组件,超酷但问题是旋转木马高度在CSS中很难定义,并且没有采用carousel-cell中内容的高度。我试图使用选项setGallerySize: false,但它不起作用。

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

你有任何解决方案吗?非常感谢

桌面渲染(见卡片下方的空间):enter image description here

移动视图渲染(见卡下面的空间):enter image description here

javascript html css flickity
1个回答
0
投票

在没有看到代码的情况下,我无法真正建议如何更改flickity css,但我建议在容器上更改和填充底部,或者从百分比(%)到像素(px)的flickity内容的margin-bottom如果你希望它保持不变。

如果您反对使用像素,请在移动设备上显示时尝试@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>
© www.soinside.com 2019 - 2024. All rights reserved.