Video 猫头鹰转盘1倍高度

我有一个滑块设置，可以容纳Vimeo/Youtube视频或图像

视频是第一张幻灯片

加载页面时，第一张幻灯片有一个从视频服务（vimeo/youtube）拉入的背景图像，似乎在将.owl stage outer.owl height类折叠为1px高度时起了作用。当我滚动到下一张幻灯片，然后返回时，会出现视频/视频背景图像，并正确设置这些类的高度

我搜索了这么多建议的解决方案，但没有找到任何可以解决问题的方法。似乎很多人都在为类似的问题而挣扎

这是我必须在这个网站上修复的最后一个bug。如果有人有更多的洞察力，那将是多么令人惊讶

我尝试过使用一个名为imagesLoaded的插件，正如在OWLGIT存储库中所建议的那样，但是出现了一个错误“imagesLoaded不是一个函数”。javascript安装正确。我不知道为什么它不能识别这个功能

我尝试了两种初始化方法： $（窗口）。加载（函数（）{ 和 $（文档）.ready（函数（）{

希望有一个Owl固有的修复程序。这个问题已经成功解决了吗？非常感谢您的帮助

谢谢

下面是一个示例页面：

这是我正在使用的代码：

<?php

/* Home Page image Slider */

?>

<script>
    $('.item-video').imagesLoaded({
        background: true
    }, function( imgLoad ) {
        $status.text( imgLoad.images.length + ' images loaded checking backgrounds' );
    }
                          );
</script>

<script>
    $(window).load(function(){
    //Initialize Owl Carousel Javascript
    $("#home-slider").owlCarousel({
        items: 1,
        loop: true,
        nav: true,
        navText: [
            "<img src='<?php echo get_template_directory_uri(); ?>/assets/images/desrosiers-architects-image-slider-arrow.png' />",
            "<img src='<?php echo get_template_directory_uri(); ?>/assets/images/desrosiers-architects-image-slider-arrow.png' />"
        ],
        margin: 0,
        dots: false,
        autoplay: false,
        animateOut: 'fadeOut',
        video: true,
        responsive: true,
        autoHeight:true,


    });
    // var mainCarousel = $("#home-slider");
    // mainCarousel.find('.owl-stage .slide').css('height', mainCarousel.find('.owl-stage-outer').height());

});
</script>
<!--Begin Home Page Property Hero Slider-->

<ul id="home-slider"
class="owl-carousel">

<?php if( have_rows('home_page_slider', 'option') ): ?>
    <?php while( have_rows('home_page_slider', 'option') ): the_row();

    //Variables
    $image = get_sub_field('home_page_photo', 'option');
    $vedio = get_sub_field('homepage_vedio', 'option');
    $alt = get_sub_field('home_page_photo_alt', 'option'); ?>

    <li class="slide item-video">
 <?php  if(!empty( $vedio) ){ ?> <a class="owl-video" href="<?php echo $vedio; ?>"></a> <?php } else { ?>
      <img class="slide-image"
             src="<?php echo $image; ?>"
             alt="<?php echo $alt; ?>" />
<?php  } ?>
    </li>

    <?php endwhile; ?>
<?php endif; ?>

</ul>

$（'.item video'）。图像已添加({
背景：对
}，功能（imgLoad）{
$status.text（imgLoad.images.length+“加载的图像检查背景”）；
}
);
$（窗口）。加载（函数（）{
//初始化Owl旋转木马Javascript
$（“#主滑块”）.owlCarousel({
项目：1，
循环：对，
导航：是的，
导航文本：[
“/assets/images/desrosiers architects图像滑块arrow.png'/>”，
“/assets/images/desrosiers architects图像滑块arrow.png'/>”
],
保证金：0，
点：错，
自动播放：错误，
动画衰减：“衰减”，
视频：没错，
回答：是的，
自动高度：正确，
});
//var main carousel=$（“#主滑块”）；
//mainCarousel.find（'.owl stage.slide'）.css（'height'，mainCarousel.find（'.owl stage outer'）.height（））；
});


"
alt=”“/>

想出了一个解决方案

var carTimer = setInterval(function() {
    if(owlCar.height() > 1) clearInterval(carTimer);
    owlCar.trigger('refresh.owl.carousel', [100]);
}, 300);

这里的owlCar是owlcarousel的实例

( var owlCar = $(".owl-carousel").owlCarousel({options}) )

我们每300毫秒在owl上触发一次刷新事件，直到它达到一个高度。一旦它达到一个高度，事件将不再被触发。window.load无法工作，因为站点加载缓慢

---

希望这可以帮助其他人。

如果您有多个类，您可以使用：

var owlCar = $('.owl-carousel').owlCarousel({
        items       : 1,
        margin      : 10,
        loop        : true,
        autoHeight  : true
    });

    var length = $(".owl-stage-outer").length;

    var carTimer = setInterval(function(){
        var gotheight = true;
        for(var i=0; i<length; i++){
            if($(".owl-stage-outer").eq(i).height() < 2){
                gotheight = false;
                break;
            }
        }

        if(gotheight)
            clearInterval(carTimer);
        else
            owlCar.trigger('refresh.owl.carousel', [100]);         
    }, 300);

var owlCar=$（'.owl carousel'）.owlCarousel({
项目：1，
差额：10，
循环：对，
自动高度：真
});
变量长度=$（“.owl stage outer”）.length；
var carTimer=setInterval（函数（）{
var gotheight=真；
对于（var i=0；i