video - Owl Carousel 1px 高度

Question

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

视频是第一张幻灯片。

在加载页面时，第一张幻灯片具有从视频服务 (vimeo/youtube) 中提取的背景图像，并且似乎在将 .owl-stage-outer .owl-height 类折叠为 1px 方面发挥了作用高度。一旦我滚动到下一张幻灯片然后返回，就会出现视频/视频背景图像并正确设置这些类的高度。

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

这实际上是我必须在此网站上修复的最后一个错误。如果有人有一些额外的见解，那就太棒了。

我已经尝试使用名为 imagesLoaded 的插件，正如 Owl Git 存储库中所建议的那样，但它会引发“imagesLoaded 不是函数”的错误。 JavaScript 已正确安装。我不确定为什么它无法识别该功能。

我已经尝试了两种初始化方式:$(窗口).load(函数(){和$(文档).ready(函数(){

希望有一个 Owl 原生的修复程序。这个问题是否已成功解决？非常感谢您的帮助。

谢谢!

这是一个示例页面:http://desrosiers.robertrhu.com/

这是我正在使用的代码:

<?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>

Answer 1

想出了一个解决方案。

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

这里owlCar是 Owl Carousel 的实例

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

我们每 300 毫秒在猫头鹰上触发一次刷新事件，直到它达到一个高度。一旦达到高度，事件就不再触发。 window.load 无法正常工作，因为网站加载缓慢。

希望这可以帮助其他人。