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

Question

我正在尝试在响应式页面上实施 bxslider（使用 Bootstrap），前 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

出于好奇，这可能有效。

$(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");

Answer 2

当第一张幻灯片有视频时，我的项目就会出现这种情况。如果初始计算 .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', '');

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

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

bxslider isn't displaying images until page resize with responsive design

jquery

html

ruby-on-rails

twitter-bootstrap

bxslider