Owl Carousel 2 - autoHeight（多项）答案

【问题标题】：Owl Carousel 2 - autoHeight (multiple items)Owl Carousel 2 - autoHeight（多项）
【发布时间】：2015-04-21 10:20:28
【问题描述】：

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

我通过在可见项目上调用 .active 类来解决这个问题，并给不可见项目一个小的高度。是否已经有更优雅的解决方案？

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

Fiddle

有什么想法吗？谢谢！

【问题讨论】：

为什么不使用你的 style="height : 450px" 并为所有 div 设置这个值？
我正在使用不同高度的图像，我不希望空白出现在轮播下方。
您需要为 OwlCarousel 孔或其项目设置高度？
猫头鹰旋转木马的高度需要与最高可见图像的高度相同，并在旅途中自行更新..

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

【解决方案1】：

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

像这样：

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

它很优雅，不需要 javascript。你甚至可以玩转场来设置一些很酷的动画。

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

PS：要使用此方法，请保持 autoHeight: false ... 否则轮播高度将被库设置为 0

【讨论】：

太棒了！值得一提的是保持 autoHeight: false，否则所有项目的高度将为 0。
你能举例说明如何添加过渡动画吗？
你是救生员！！！！！！是的，有人在 2020 年寻找！
简单的解决方案，但它就像一个魅力！非常感谢

【解决方案2】：

我通过内部 API 使用多个调用同一个 autoHeight 函数的事件解决了这个问题。

Fiddle

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; }

希望对你有帮助。

【讨论】：

感谢您的大力帮助！！当项目具有给定的高度时，它工作得很好。是否可以根据动态项目高度缩放 stageHeight？有没有办法用第一项的高度（在页面加载时）初始化 stageHeight？ jsfiddle.net/Schakelen/y18074c0
我不明白，因为您的 Fiddle 已经使用动态项目高度，我找不到任何固定高度。是的，您可以使用 jQuery :first-selector 将 stageHeight 初始化为第一项的高度。 https://jsfiddle.net/y18074c0/5/

【解决方案3】：

我用 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;
}

我希望这个回复能帮助每个有这个问题的人。

【讨论】：

【解决方案4】：

我有同样的问题。我只解决了添加一个 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
    }
  }
})

【讨论】：