[英]How to make slick carousel full screen?
我正试图让旋转木马占据整个屏幕,我正在尝试的任何东西似乎都在工作......
$('.scroller').slick({ dots: true, infinite: true, autoplay: true })
.scroller { div { text-align: center; font-size: 30px; max-height: 100%; } } .slick-prev::before, .slick-next::before { color: #000; } .slick-next { right: -5px; } .slick-prev { left: -5px; }
<div class="scroller"> <div>1</div> <div>2</div> <div>3</div> </div>
将最大高度设置为100%没有任何解决方法。 目前它只覆盖了大约三分之一的页面
您可以使用JQuery动态地将滚动条的高度设置为屏幕的高度:
$(document).ready(function(){
$('.scroller').css('height', $(window).height() + 'px');
});
您可以使用此功能 。
var elem = document.getElementByClassName("scroller")[0];
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
在css ....
制作光滑的容器......
身高:100vh;
然后确保两个:
带有.slick-track类的光滑容器的子元素
和
你的幻灯片元素
高度:100%;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.