Question

我正在尝试在我的网站上实现全高幻灯片。但是，如果浏览器宽度超过767px，我希望幻灯片显示为全高。

到目前为止，这是我的代码：

if( $(window).width() > 767) {

  $(window).resize(function() {

   var winHeight = $(window).height(); 
   var headerHeight = $(".navbar").height(); 
   $('.slideshow, .slideshow li').height(winHeight);


  });

  $(window).trigger('resize');

}

如果浏览器的宽度大于767，那么它有点起作用。但是。如果浏览器的宽度小于767，并且我开始调整大小超过767，则脚本不会启动。

我有什么想法可以解决这个问题吗？

Answer 1

当您的浏览器在resize启动时绑定width > 767事件处理程序，尝试删除if条件并且它应该可以正常工作

编辑：

仅在宽度为＆gt;时才使其适用767，条件应该在resize事件

内

$(window).resize(function() {
  if($(window).width() > 767) {
    var winHeight = $(window).height(); 
    var headerHeight = $(".navbar").height(); 
    $('.slideshow, .slideshow li').height(winHeight);
  } else {
    $('.slideshow, .slideshow li').height(400); //initial height
  }
});
$(window).trigger('resize');

Answer 2

您应该可以使用媒体查询在css中更轻松地完成此操作。

@media (min-width:500px){
  .slideshow{
    height:100%;
  }
}

达到最小窗口宽度时触发全高容器

2 个答案: