猫头鹰旋转木马 1px 高度

Question

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

视频是第一张幻灯片。

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

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

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

我尝试使用一个名为imagesLoaded的插件，正如Owl Git存储库所建议的那样，但它踢出"imagesLoaded不是一个函数"的错误。JavaScript 已正确安装。我不确定为什么它不识别该功能。

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

很想有一个猫头鹰原生的修复程序。这个问题是否已成功解决？如能得到一些帮助，将不胜感激。

谢谢！

下面是一个示例页面：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);

这里的猫头鹰汽车是猫头鹰旋转木马的实例

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

这对我来说是有用的。