Question

这是有问题的页面：http://k2ld.91dev.com.au/project/balwyn-residence/

轮播使用autoheight:true。

在某些移动浏览器上，包括Dolphin，iPhone，Google Nexus 4（在Chrome开发工具中查看）时，.owl-wrapper-outer容器将应用较小的内嵌高度来裁剪第一张图片。

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

我的猫头鹰代码看起来像这样（在document.ready内）：

// Owl Slider
$(".owl-carousel").owlCarousel({
    items: 1,
    loop: true,
    autoHeight: true
});

我最初使用Owl Carousel 1然后切换到版本2以查看问题是否消失......它没有。

一旦图像满载，我怎样才能让旋转木马计算它的高度？

Answer 1

我使用一些猫头鹰属性手动创建了一个脚本，创建了一个创建轮播的函数，它获取了每个元素的单独高度，以及每个项目元素的箭头。有了这个，我们可以任何分辨率调整旋转木马的高度。

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

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

我希望这有帮助！

Answer 2

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

Answer 3

使用imagesLoaded

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

猫头鹰旋转木马 - 自动高度移动问题

3 个答案: