目前,Owl Carousel autoHeight 仅适用于屏幕上的 1 个项目。他们的计划是计算所有可见项目并根据最高项目改变高度。
我通过在可见项上调用 .active 类来解决这个问题,并为不可见项提供较小的高度。是否已经有更优雅的解决方案?
$('.owl-carousel').owlCarousel({
loop: true,
items: 3,
margin: 1,
autoHeight: true,
});
有什么想法吗?谢谢!
最佳答案
我不确定在 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/