javascript Owl Carousel 2 - autoHeight（多个项目）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29769409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Owl Carousel 2 - autoHeight (multiple items)
提问by Schakelen
At the moment the Owl Carousel autoHeight works only with 1 item on screen. Their plan is to calculate all visible items and change height according to highest item.
目前 Owl Carousel autoHeight 仅适用于屏幕上的 1 个项目。他们的计划是计算所有可见项目并根据最高项目更改高度。
I work around this problem by calling the .active classes on the visible items, and give the invisible items a small height. Is there already a more elegant solution?
我通过在可见项目上调用 .active 类来解决这个问题，并为不可见项目提供一个小的高度。已经有更优雅的解决方案了吗？
$('.owl-carousel').owlCarousel({
loop: true,
items: 3,
margin: 1,
autoHeight: true,
});
Any Ideas? Thanks!
有任何想法吗？谢谢！
回答by Dennis Helfensteller
I solved it via the internal API using several events calling the same autoHeight-function.
我使用多个调用相同 autoHeight 函数的事件通过内部 API 解决了这个问题。
The jQuery-Part:
jQuery 部分：
$('.owl-carousel').owlCarousel({
loop: true,
items: 3,
margin: 1,
autoHeight: true,
onInitialized: setOwlStageHeight,
onResized: setOwlStageHeight,
onTranslated: setOwlStageHeight
});
function setOwlStageHeight(event) {
var maxHeight = 0;
$('.owl-item.active').each(function () { // LOOP THROUGH ACTIVE ITEMS
var thisHeight = parseInt( $(this).height() );
maxHeight=(maxHeight>=thisHeight?maxHeight:thisHeight);
});
$('.owl-carousel').css('height', maxHeight );
$('.owl-stage-outer').css('height', maxHeight ); // CORRECT DRAG-AREA SO BUTTONS ARE CLICKABLE
}
For enabling the height-animation I added the following CSS:
为了启用高度动画，我添加了以下 CSS：
.owl-carousel,
.owl-stage-outer { transition: height 500ms ease-in-out 0s; }
Hope it helps.
希望能帮助到你。
回答by Johnny
I'm not sure if anyone is still looking for solutions for this problem in 2020, but after trying a lot of things that didn't work, I found a very simple one. It's all about setting no height to the item that's not active.
不知道2020年有没有人还在寻找这个问题的解决方案，但是在尝试了很多没有用的东西之后，我找到了一个非常简单的方法。这完全是关于不为不活动的项目设置高度。
Like so:
像这样：
.owl-item {height: 0;}
.owl-item.active {height: auto;}
It's elegant and no javascript is needed. You can even play with transitions to set some cool animations.
它很优雅，不需要 javascript。您甚至可以使用过渡来设置一些很酷的动画。
I hope I have helped someone here.
我希望我在这里帮助了某人。
PS: To use this method, keep autoHeight: false ... otherwise the carousel height will be set to 0 by the library
PS：要使用此方法，请保持 autoHeight: false ... 否则库将设置轮播高度为 0
回答by Behnam Azimi
I used flex to solve this issue:
我用flex来解决这个问题：
.owl-stage {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
above code for owl-stageand below for owl-itemclass:
上面的代码owl-stage和下面的owl-item类：
.owl-item{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: auto !important;
}
I hope this reply help every body that have this issue.
我希望这个回复能帮助每个有这个问题的机构。
回答by novecentonove
I had same issue. I only resolved adding a autoWidth:true, and it works now!
我有同样的问题。我只解决了添加 autoWidth:true 的问题，现在可以使用了！
My owl script is:
我的猫头鹰脚本是：
$('.owl-carousel').owlCarousel({
loop: false,
margin: 10,
items: 1,
autoHeight: true,
autoWidth: true,
nav: true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
autoplay: true,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
