javascript - Owl Carousel 2 - 自动高度(多项)

标签 javascript jquery height owl-carousel owl-carousel-2

目前,Owl Carousel autoHeight 仅适用于屏幕上的 1 个项目。他们的计划是计算所有可见项目并根据最高项目改变高度。

我通过在可见项上调用 .active 类来解决这个问题,并为不可见项提供较小的高度。是否已经有更优雅的解决方案?

$('.owl-carousel').owlCarousel({
loop: true,
items: 3,
margin: 1,
autoHeight: true,
});

Fiddle

有什么想法吗?谢谢!

最佳答案

我不确定在 2020 年是否还有人在寻找这个问题的解决方案,但是在尝试了很多没有用的方法之后,我找到了一个非常简单的方法。这都是关于不为不活动的项目设置高度。

像这样:

.owl-item {height: 0;}    
.owl-item.active {height: auto;}

它很优雅,不需要 javascript。您甚至可以使用过渡来设置一些很酷的动画。

我希望我在这里帮助了某人。

PS:要使用这个方法,要保持autoHeight: false ...否则轮播高度会被库设置为0

关于javascript - Owl Carousel 2 - 自动高度(多项),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29769409/

相关文章:

javascript - html背景图片更改为css?

jQuery 文档就绪函数

javascript - 无法在 ViewModel Knockout 中执行函数

ios - uitableview 自动调整大小中图像和单元格的动态高度

wpf - 如何保持网格单元格的高度和宽度相同

javascript - 带有来自 CSV 的线层的传单 map

javascript - Meteor - 无法从 Meteor 或帐户调用 loginWithToken

javascript - 如何停止背景图像上的动画

javascript - Jquery 方法(单击、更改)不起作用

html - 有没有针对高度: calc(100%-70px)的跨浏览器解决方案