Question

目前，Owl Carousel autoHeight仅在屏幕上显示1项。他们的计划是计算所有可见项目并根据最高项目更改高度。

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

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

Fiddle

任何想法？谢谢！

Answer 1

我使用几个调用相同autoHeight函数的事件通过内部API解决了它。

Fiddle

jQuery-Part：

$('.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; }

希望它有所帮助。

Answer 2

我不确定是否有人会在2020年为这个问题寻找解决方案，但是在尝试了许多无效的方法后，我发现了一个非常简单的方法。都是为了不为未激活的项目设置高度。

像这样：

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

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

我希望我已经帮助了这里的人。

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

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

我希望此回复对遇到此问题的所有人有所帮助。

Answer 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
    }
  }
})

Owl Carousel 2 - autoHeight（多件商品）

4 个答案: