猫头鹰走马灯1像素高度

Question

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

视频是第一张幻灯片。

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

我已经搜索了很多提议的解决方案，但没有找到任何可修复问题的方法。看来许多人都遇到了类似的问题。

这真的是我在这个网站上需要修复的最后一个错误。如果有人能提供额外的见解，那就太棒了。

我尝试过使用一个名为imagesLoaded的插件，正如在Owl Git存储库中建议的那样，但它会出现“imagesLoaded不是函数”的错误。javascript已正确安装。我不知道为什么它无法识别该函数。

我尝试了两种初始化方式： $(window).load(function(){ 和 $(document).ready(function(){

希望有一个本地于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>

- user5176291

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毫秒触发一次owl的刷新事件，直到它获得高度。一旦它获得高度，事件就不再被触发。window.load没有起作用，因为网站加载速度较慢。

希望这能对其他人有所帮助。

- user5176291

Answer 2

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

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

这对我有效。

- zhliow