Owl 轮播全屏不工作
Owl carousel full screen doesn't work
我正在尝试为我的网站制作 owl 轮播滑块全屏。
这就是我需要的,请随意调整您的浏览器
这就是我所拥有的,
$(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');
}
});
有解决办法吗?
感谢
试试这个:
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
当使用 % 作为高度时,您必须沿着 DOM 链向下移动到您的子元素以应用高度。
另一种选择是利用 vh 单位。 100vh = window 高度的 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.
我正在尝试为我的网站制作 owl 轮播滑块全屏。 这就是我需要的,请随意调整您的浏览器
这就是我所拥有的,
$(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');
}
});
有解决办法吗?
感谢
试试这个:
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
当使用 % 作为高度时,您必须沿着 DOM 链向下移动到您的子元素以应用高度。
另一种选择是利用 vh 单位。 100vh = window 高度的 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.