目前 Owl Carousel autoHeight 仅适用于屏幕上的 1 个项目。他们的计划是计算所有可见项目并根据最高项目更改高度。
我通过在可见项目上调用 .active 类来解决这个问题,并给不可见项目一个小的高度。是否已经有更优雅的解决方案?
$('.owl-carousel').owlCarousel({
loop: true,
items: 3,
margin: 1,
autoHeight: true,
});
有任何想法吗?谢谢!
目前 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
我通过内部 API 使用多个调用相同 autoHeight 函数的事件解决了这个问题。
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
}
为了启用高度动画,我添加了以下 CSS:
.owl-carousel,
.owl-stage-outer { transition: height 500ms ease-in-out 0s; }
希望能帮助到你。
我使用 flex 来解决这个问题:
.owl-stage {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
上面的代码owl-stage
和下面的owl-item
类:
.owl-item{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: auto !important;
}
我希望这个回复能帮助每个有这个问题的人。
我有同样的问题。我只解决了添加一个 autoWidth:true 的问题,它现在可以工作了!
我的猫头鹰脚本是:
$('.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
}
}
})