在使用响应式设计调整页面大小之前，bxslider 不会显示图像

Question

我正在尝试在响应式页面（使用 Bootstrap）上实现 bxslider，并且在前 2 或 3 次它正确显示图像。然而，在那之后它只显示一个狭窄的白色带：

如果我调整浏览器的大小，那么 bxSlider 会正确调整大小并显示图像。

我的部分代码包含以下代码（注意，这会填充一个 div 作为 AJAX 调用的结果）

<ul class="product-view-bxslider">
  <% @product.images.each do |image| %>
      <li><%= image_tag image.image.url %></li>
  <% end %>
</ul>

<script>
  $(document).ready(function(){
    console.log('slider initialising');
    $('.product-view-bxslider').bxSlider({
      onSliderLoad: function(){
        console.log('finished loading');
      }
    });
  });
</script>

bxslider 设置工作正常，因为我总是得到预期的输出到控制台。

我已经在 Safari、Chrome 和 Firefox 中复制了这种行为。

根据我的搜索结果，大多数在使用 bxslider 时遇到过调整大小问题的人在调整浏览器大小时遇到​​问题，而不是在初始加载时。

编辑

为 bxslider 的布局设置初始固定高度一次显示所有图像（包括 2 个额外的 - 我假设它们用于缓冲导航）。同样，只有浏览器调整大小会强制 bxslider 调整大小并正确显示。

.bx-viewport.bx-viewport {
  min-height: 90px;
}

这表明问题可能不是我最初认为的那样，是响应式布局行为不当造成的。

也许以下信息与这个问题有关。我正在使用 Rails，我之前发布的页面是 AJAX 调用 ProductsController#show 操作的结果。这里似乎没有发生任何深奥的事情：

ProductsController#show

  def show
  end

show.js.erb

  $('#product-details').html("<%= escape_javascript(render 'products/show') %>")

_show.html.erb

在问题开始时发布

调用

<%= link_to 'Show', product, remote: true %>

Answer 1

当第一张幻灯片有视频时，我的项目就会发生这种情况。如果初始计算.bx-viewport 的时间过长，bxSlider 有时会达到一个奇怪的默认高度。通常，它会在刷新甚至幻灯片转换时重新加载正确的高度。试试这个：

.bx-viewport.bx-viewport {
   min-height: 90vh;
}

根据您的具体需求调整值，但我建议您使用固有或绝对的度量单位，例如 vh 或 px，并避免使用百分比或 em 等相对度量。

另一个修复与前一个类似，但违反直觉：

`$('.bx-viewport`).height(0).css('min-height', '80vh')`;

@David 通过使用与我相反的方法找到了解决方案，这表明他的网站对 bxSlider 的负担比我的要少。 bxSlider 不会在每次加载错误或超时时挂起，它倾向于继续并开始制作快捷方式。不幸的是，.bx-viewport 的高度计算是常见的快捷方式受害者，导致 bxSlider (.bx-viewport {height:0}) 变窄。

`$('.bx-viewport').css('height', '');

这个和以前的技术将“唤醒” bxSlider 重新计算.viewport 高度。两者都做同样的事情，但里程因用户而异。

Answer 2

出于好奇，这可能有效。

$(function () {
  // Your code.
  $(element).bxSlider({
    // options.
  });
  // Add this.
  $(window).trigger("resize");
});

所以，你需要做的就是，在 bxSlider 加载之后添加这个小代码：

$('.product-view-bxslider').bxSlider({
  onSliderLoad: function(){
    console.log('finished loading');
  }
});
// Add this.
$(window).trigger("resize");