貓頭鷹傳送帶高度被設置爲最大的項目第一個

Question

我剛剛開始了一項新工作，我的第一個任務之一是解決他們的客戶網站上的旋轉木馬問題。 長篇小說當您加載頁面時，旋轉木馬中的第一個視頻下面有大面積的空白區域。 做了幾個控制檯日誌之後，似乎輪播高度默認爲DOM中最大的項目，即使它不是活動項目。如果調整屏幕大小，它會自行更正，但只要刷新空白返回即可。

下面是所有的選項和自定義高度計算器功能。 我一直在這一整天工作，但並沒有真正得到它的任何地方。

我不確定該代碼片段是否會有很大的幫助，但如果有人遇到過類似的情況，並且可能將我指向正確的方向，我將非常感激。

// Homepage Banner Carousel 
 
    if ($('#home-banner-carousel').length > 0) { 
 

 
    $('#home-banner-carousel').imagesLoaded(function() { 
 

 
     var owl = $('#home-banner-carousel'); 
 
     owl.on('initialized.owl.carousel', function(e) { 
 
      var current = e.item.index; 
 
      var video = $(e.target).find(".owl-item").eq(current).find("video"); 
 
     // var videoHeight = $('.owl-item.active').height(); 
 
      if (video.length) { 
 
      // console.log(videoHeight); 
 
      $(e.target).find(".owl-item").eq(current).find("video").get(0).play(); 
 
      //$('owl-stage-outer').css('height', videoHeight); 
 
      } 
 
     }).owlCarousel({ 
 
     items: 1, 
 
     margin: 0, 
 
     dots: true, 
 
     nav: true, 
 
     animateOut: "fadeOut", 
 
     navText: ["", ""], 
 
     navContainer: ".carousel-controls", 
 
     video: true, 
 
     autoplay:false, 
 
     autoplayTimeout:10000, 
 
     loop: true, 
 
     mouseDrag: false, 
 
     touchDrag: false, 
 
     autoHeight:true, 
 
     callbacks: true, 
 
     onInitialized: setOwlStageHeight, 
 
     onResized: setOwlStageHeight, 
 
     onTranslated: setOwlStageHeight, 
 
     onTranslate: function(property) { 
 
      var current = property.item.index; 
 
      var video = $(property.target).find(".owl-item").eq(current).find("video"); 
 
     // console.log(video.height()); 
 
      if (video.length) { 
 
      $(property.target).find(".owl-item").eq(current).find("video").get(0).play(); 
 
      } else { 
 
      $('.owl-item').find('video').each(function() { 
 
       this.pause(); 
 
      }); 
 
      } 
 
     } 
 
     }); 
 
function setOwlStageHeight(event) { 
 
    var maxHeight = 0; 
 
    $('.owl-item.active').each(function() { // LOOP THROUGH ACTIVE ITEMS 
 
     var thisHeight = parseInt($(this).height()); 
 
     console.log(thisHeight); 
 
     maxHeight=(maxHeight>=thisHeight?maxHeight:thisHeight); 
 
     console.log(maxHeight); 
 
    }); 
 
    $('.owl-carousel').css('height', maxHeight); 
 
    $('.owl-stage-outer').css('height', maxHeight); // CORRECT DRAG-AREA SO BUTTONS ARE CLICKABLE 
 
} 
 
    }); 
 

 
    }

乾杯！

Answer 1

您需要將「autoHeight：true」更改爲「autoHeight：false」