【问题标题】:Owl carousel full screen doesn't work猫头鹰轮播全屏不工作
【发布时间】:2017-08-04 02:44:23
【问题描述】:

我正在尝试为我的网站制作猫头鹰轮播滑块全屏。 这是我需要的,请随意调整您的浏览器大小

这就是我所拥有的,

fiddle

$(document).ready(function() {

  // carousel setup
  $(".owl-carousel").owlCarousel({
    navigation : false,
    slideSpeed : 300,
    paginationSpeed : 400,
    singleItem: true,
    autoHeight: true,
    afterMove: top_align,
  });

  function top_align() {
    $(window).scrollTop(0);
    console.log('move');
  }

});

有解决办法吗?

谢谢

【问题讨论】:

标签: javascript css height carousel fullscreen


【解决方案1】:

当使用 % 作为高度时,您必须沿着 DOM 链向下直到您的子元素才能应用高度。

另一个选择是利用 vh 单位。 100vh = 100% 的窗口高度。

只需将 100vh 添加到 .owl-item 和您的 div 项即可。

.owl-item, .item {
    height: 100vh;
}

一个vh单位is defined as

等于视口初始包含块高度的 1%。

【讨论】:

    【解决方案2】:

    试试这个:

    html, body {
        height: 100%;
        margin: 0;
    } 
    
    .owl-wrapper-outer {
        height: 100% !important;    
    }
    
    .owl-wrapper {
         height: 100%;   
    }
    
    .owl-item {
        height: 100%;
    }
    
    .b-Amarelo {
        height: 100%;
    }
    
    .owl-item h1 {
        margin: 0;
    }
    

    演示:Fiddle

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-02-04
      • 2014-10-09
      • 1970-01-01
      • 1970-01-01
      • 2018-09-04
      相关资源
      最近更新 更多