Question

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

视频是第一张幻灯片。

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

我已经搜索了很多提议的解决方案，但还没有发现任何可以解决问题的方法。似乎很多人都在努力解决类似的问题。

这是我必须在本网站上修复的最后一个错误。如果有人有额外的见解，会是如此惊人。

我尝试过使用名为imagesLoaded的插件，就像在Owl Git存储库中所建议的那样，但它踢错了“imagesLoaded”并不是一个函数＆＃39;。 javascript已正确安装。我不确定为什么它不承认这个功能。

我尝试了两种初始化方法： $（窗口）.load（函数（）{ 和 $（文件）。就绪（函数（）{

很想拥有猫头鹰原生的修复方案。这个问题是否成功解决了？非常感谢一些帮助。

谢谢！

以下是一个示例页面：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毫秒就会在owl上触发一次刷新事件，直到它达到一个高度。一旦达到高度，事件就不再被触发。 window.load无法正常工作，因为网站加载缓慢。

希望这可以帮助别人。

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

这对我有用。

猫头鹰旋转木马1px高度

2 个答案: