Owl Carousel 2 - autoHeight（多件商品） [英] Owl Carousel 2 - autoHeight (multiple items)

问题描述

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

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.

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

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?

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

小提琴

任何想法？谢谢！

推荐答案

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

I solved it via the internal API using several events calling the same autoHeight-function.

小提琴

jQuery-Part：

The 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：

For enabling the height-animation I added the following CSS:

.owl-carousel,
.owl-stage-outer { transition: height 500ms ease-in-out 0s; }

希望有所帮助。

这篇关于Owl Carousel 2 - autoHeight（多件商品）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！