我正在尝试名为Flickity的组件,超级酷,但是问题是轮播的高度很难在CSS中定义,并且不能采用carousel-cell
中内容的高度。我尝试使用选项setGallerySize: false
,但是它不起作用。
我有一个移动优先的网站,其内容会根据设备的不同而缩小,我希望Flickity轮播能够与内容高度匹配。
请问您有解决方案吗?
非常感谢
桌面渲染(请参见卡片下方的空间):
移动视图渲染(请参见卡片下方的空间):
最佳答案
如果不看代码,我无法真正建议如何更改flickity css,但我建议您将容器上的flickity内容的padding-bottom底部或padding-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>
关于javascript - 如何使Flickity轮播的高度受内容限制?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55262022/