Javascript Owl转盘装载问题（未缩放图像闪烁和项目编号不正确）

当OwlCarousel加载到页面上时，我有两个问题

我得到一个闪光的图像没有缩小到其适当的比例 旋转木马将所有东西踢到位之前的尺寸

有时在页面加载时，转盘选项似乎没有 开始时，我每张幻灯片都有几张图像，而不是一张 有意的

因为旋转木马中的图像大小都不同，但我希望它们居中，导航按钮保持在同一位置，所以我的主要旋转木马项目是div，里面有动态生成的图像（也使用LazySizes JS来lazyload）

我的HTML是：

<div class="owl-carousel owl-theme">
    <?php foreach ($page->pictures()->yaml() as $image): ?>
    <?php if($img = $page->image($image)): ?>
    <div class="owl-holder">
        <img    data-sizes="auto"
                data-srcset="<?= $img->resize(null, 560, 80)->url() ?> 1x,
                <?= $img->url() ?> 2x" alt="<? $page->title()->html()?>"
                data-src="<?= $img->url() ?>"
                src="<?= $img->url() ?>"
                class="lazyload">
    </div>
    <?php endif ?>
    <?php endforeach ?>
</div>

还有javascript：

$(".owl-carousel").owlCarousel({
      items: 1,
      margin: 10,
      center: true,
      loop: true,
      nav: true,
  });

加上此功能，可在较小的设备上断开旋转木马，使图像彼此重叠：

// Create and play resize function
$(function() {
    var owl = $('.owl-carousel'),
        owlOptions = {
            items: 1,
            margin: 10,
            center: true,
            loop: true,
            nav: true,
        };

    if ( $(window).width() > 897 ) {
        var owlActive = owl.owlCarousel(owlOptions);
    } else {
        owl.addClass('off');
    }

    // Fire on page resize
    $(window).resize(function() {
        if ( $(window).width() > 897 ) {
            if ( $('.owl-carousel').hasClass('off') ) {
                var owlActive = owl.owlCarousel(owlOptions);
                owl.removeClass('off');
            }
        } else {
            if ( !$('.owl-carousel').hasClass('off') ) {
                owl.addClass('off').trigger('destroy.owl.carousel');
                owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
            }
        }
    });

    // Fire on page load
    if ( $(window).width() < 897 ) {
        owl.addClass('off').trigger('destroy.owl.carousel');
        owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
    }
});

//创建并播放调整大小功能
$（函数（）{
var owl=$（'.owl carousel'），
选项={
项目：1，
差额：10，
中：是的，
循环：对，
导航：是的，
};
如果（$（窗口）.width（）>897）{
var owlActive=owl.owlCarousel（owlpoptions）；
}否则{
owl.addClass（'off'）；
}
//在页面上点火调整大小
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）>897）{
if（$（'.owl carousel'）.hasClass（'off'））{
var owlActive=owl.owlCarousel（owlpoptions）；
owl.removeClass（'off'）；
}
}否则{
if（！$（'.owl carousel'）.hasClass（'off'））{
addClass（'off'）.trigger（'destroy.owl.carousel'）；
查找（'.owl stage outer'）.children（':eq（0）'）.unwrap（）；
}
}
});
//页面加载时发生火灾
如果（$（窗口）.width（）<897）{
addClass（'off'）.trigger（'destroy.owl.carousel'）；
查找（'.owl stage outer'）.children（':eq（0）'）.unwrap（）；
}
});

有人能帮我确定是什么导致了这个故障吗

可在Teshherb.wwwss46.a2hosted.com上查看该页面的详细信息

// Create and play resize function
$(function() {
    var owl = $('.owl-carousel'),
        owlOptions = {
            items: 1,
            margin: 10,
            center: true,
            loop: true,
            nav: true,
        };

    if ( $(window).width() > 897 ) {
        var owlActive = owl.owlCarousel(owlOptions);
    } else {
        owl.addClass('off');
    }

    // Fire on page resize
    $(window).resize(function() {
        if ( $(window).width() > 897 ) {
            if ( $('.owl-carousel').hasClass('off') ) {
                var owlActive = owl.owlCarousel(owlOptions);
                owl.removeClass('off');
            }
        } else {
            if ( !$('.owl-carousel').hasClass('off') ) {
                owl.addClass('off').trigger('destroy.owl.carousel');
                owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
            }
        }
    });

    // Fire on page load
    if ( $(window).width() < 897 ) {
        owl.addClass('off').trigger('destroy.owl.carousel');
        owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
    }
});