如何使光滑的旋转木马全屏?

时间:2016-04-11 17:08:31

标签: javascript jquery html css twitter-bootstrap

我正试图让旋转木马占据整个屏幕,我正在尝试的任何东西似乎都无法工作......

  $('.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%无法解决问题。它目前只覆盖了大约三分之一的页面

3 个答案:

答案 0 :(得分:5)

您可以使用JQuery动态地将滚动条的高度设置为屏幕高度:

$(document).ready(function(){
  $('.scroller').css('height', $(window).height() + 'px');
});

答案 1 :(得分:1)

You can use this function

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

答案 2 :(得分:0)

在css ....

制作光滑的容器......

身高:100vh;

然后确保两个:

带有.slick-track类的光滑容器的子元素

你的幻灯片元素

有高度:100%;