如何制作光滑的轮播全屏?

新手上路,请多包涵

我试图让一个轮播占据整个屏幕,我正在尝试的似乎没有任何效果……

   $('.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% 并没有解决它。目前只覆盖页面的三分之一左右

原文由 ncrouch25 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 250
2 个回答

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

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

原文由 A.Sharma 发布,翻译遵循 CC BY-SA 3.0 许可协议

在 CSS 中….

让你光滑的容器…

高度:100vh;

然后确保两者:

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

你的幻灯片元素

有高度:100%;

原文由 Danielle Davis 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题