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

你需要改变＆＃34; autoHeight：true＆＃34;到＆＃34; autoHeight：false＆＃34;

猫头鹰旋转木马高度首先设置为最大项目

1 个答案: