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

Owl Carousel - Auto Height mobile issue

本文关键字：高度 移动 问题 旋转木马 猫头鹰      更新时间：2024-01-27

这是有问题的页面：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
});

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

一旦图像完全加载，我如何让转盘计算其高度？

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

我希望这能有所帮助！

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

使用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'
            });
        });
    });
相关文章：