javascript - Owl Carousel - 自动高度移动问题

Question

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

旋转木马使用autoheight:true.

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

一旦你向左和向后滑动，高度就会重新计算，一切都很好。

我的 Owl 代码如下所示（在 a 内document.ready）：

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

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

图像完全加载后，如何让轮播计算其高度？

Answer 1

我使用一些 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);
}

我希望这有帮助！

Answer 2

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

Answer 3

使用加载的图像

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