Owl Carousel 2 – autoHeight（多件商品）

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

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

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

小提琴

有任何想法吗？ 谢谢！

Answer 1

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

小提琴

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

我有同样的问题。 我只解决了添加autoWidth：true的问题，现在就可以了！

我的猫头鹰脚本是：

  $('.owl-carousel').owlCarousel({ loop: false, margin: 10, items: 1, autoHeight: true, autoWidth: true, nav: true, navText: [ "", "" ], autoplay: true, autoplayHoverPause: true, responsive: { 0: { items: 1 }, 600: { items: 3 }, 1000: { items: 5 } } })