Search code examples
jqueryhtmlruby-on-railstwitter-bootstrapbxslider

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

I am trying to implement bxslider on a responsive page (using Bootstrap) and for the first 2 or 3 times it is showing images correctly. However after that it just shows a narrow white band:

enter image description here

If I resize the browser then the bxSlider resizes correctly and displays the images.

My partial code contains the following code (Note, this populates a div as a result of an AJAX call)

<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>

The bxslider setup is working correctly as I do always get the expected output to console.

I have replicated this behaviour in Safari, Chrome and Firefox.

From my searches most people who have had resize issues with bxslider were having issues when resizing the browser, not on initial load.

Edit

Setting an initial fixed height for the layout of the bxslider displays all images at once (including 2 extra - which I assume are for buffering the navigation). Again only a browser resize forces the bxslider to resize and display correctly.

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

enter image description here

This is suggesting that perhaps the issue isn't, as I originally believed, a result of misbehaving with responsive layouts.

Perhaps the following information is pertinent to this question. I am using Rails and the page I posted earlier is a result of an AJAX invocation of ProductsController#show action. There doesn't appear to be anything esoteric going on here:

ProductsController#show

  def show
  end

show.js.erb

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

_show.html.erb

as posted at start of question

invocation

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

  • That happens to my projects when the first slide has a video. bxSlider sometimes will go to a strange default height if it takes too long on initial calculation of .bx-viewport. Typically, it will reload the correct height on a refresh or even a transition of a slide. Try this:

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

    Adjust the value to your specific needs, but I recommend that you use an intrinsic or absolute unit of measurement such as vh or px, and avoid relative measurements like percentages or em.

    Another fix is like the previous one, but counter-intuitive:

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

    @David has found the solution by using the opposite of what I use, suggesting that his site burdens bxSlider less than mine does. bxSlider does not hang on every loading error or timeout, it has a tendency to continue and start making shortcuts. Unfortunately, the calculation for .bx-viewport's height is a common shortcut victim, resulting in a narrow bxSlider (.bx-viewport {height:0}).

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

    This and previous techniques will "wake up" bxSlider into recalculating .viewport height. Either one does the same thing, but mileage varies per user.