Javascript 猫头鹰转盘-自动高度移动问题

这是相关页面：

转盘使用

autoheight:true

在某些移动浏览器上，包括Dolphin、iPhone、Google Nexus 4（在Chrome开发工具中查看时），

.owl wrapper outer

容器将应用一个小的内联高度，以裁剪第一幅图像

向左和向后滑动后，将重新计算高度，一切正常

我的Owl代码如下所示（在

文档中。ready

）：

我最初使用猫头鹰转盘1，然后切换到版本2，看看问题是否消失了。。。没有

---

在图像完全加载后，如何让旋转木马计算其高度？

我最终将滑块更改为BX Slider，它提供类似的功能。

我使用一些owl属性手动创建了一个脚本，创建了一个函数来创建旋转木马，它采用每个元素的单独高度，和箭头表示每个项目的元素。有了这个，我们可以在任何分辨率下调整旋转木马的高度

在您的情况下，您将执行以下操作：

$(".owl-carousel").owlCarousel({
    items: 1,
    loop: true,
    afterAction : afterAction
});


function afterAction() {
    var elem = this.owl.owlItems;
    var index = this.owl.visibleItems;

    var height = elem.eq(index).height();

    //.owl-wrapper is the element that we are high.
    elem.parents('.owl-wrapper, .owl-carousel').css('height', height);
}

我希望这有帮助

使用图像标记

jQuery(document).ready(function () {
        jQuery('#div_id').imagesLoaded(function () {
            jQuery('#div_id .scroll-box').owlCarousel({
                items: 1,
                nav: false,
                pagination: false,
                autoHeight: true,
                loop: true,
                lazyLoad: true,
                animateOut: 'slideOutRight',
                animateIn: 'pulse'
            });
        });
    });

jQuery(document).ready(function () {
        jQuery('#div_id').imagesLoaded(function () {
            jQuery('#div_id .scroll-box').owlCarousel({
                items: 1,
                nav: false,
                pagination: false,
                autoHeight: true,
                loop: true,
                lazyLoad: true,
                animateOut: 'slideOutRight',
                animateIn: 'pulse'
            });
        });
    });