javascript - 猫头鹰轮播全屏不起作用

Question

我正在尝试为我的网站制作全屏猫头鹰旋转木马 slider 。这就是我需要的，随意调整您的浏览器

这就是我所拥有的，

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

});

有解决办法吗？

谢谢

Answer 1

当使用 % 作为高度时，您必须沿着 DOM 链向下移动到您的子元素以应用高度。

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

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

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

vh 单元 is defined as :

Equal to 1% of the height of the viewport's initial containing block.