bxslider calculating wrong viewport size on load

Question

Anyway I recently started using bxslider and I\'m having an issue with it.

It seems to calculate its viewport size wrongly on page load, which means it doesn\'t work we

Answer 1

Matthew Watson gave me a good idea and I went into the plugin and updated the actual getViewPortHeight() function like so :

var getViewportHeight = function(){
    var height = 0;
    children = slider.children;
    height = jQuery(slider.children[0]).height();;
    return height;
}

So now it is taking the height of the first image in there (hopefully they are all the same…) and using that to determine the height of the slider. Please note, your controls will still sit below the slider, but this can be fixed with css positioning etc.

Hope this helps some lost folks out there.

Answer 2

If you are loading the <ul> element with ajax and it contains images, try slider.reloadSlider(); after the load. First I used

setTimeout('slider.reloadSlider()',1000);

to wait for the images to load, but eventually I switched to the nice library ImagesLoaded that will wait for the images to load:

imagesLoaded('.seminars-slider', function() {
   slider.reloadSlider();
});

(changed the variable-names to match those of the question)

Answer 3

You can use

slider=jQuery('.seminars-slider').bxSlider({
    mode: 'vertical',
    controls:false,
    pager:false,
    minSlides:2,
    maxSlides:2,
    moveSlides:1
});
setTimeout(function(){
            slider.redrawSlider();
        },100);

Answer 4

Found a solution for this safari bug. You have to have the mode of the slider at horizontal (not sure if vertical works too but the fade is not working at all). Then you have to get the height of the first image and pass it to the ".bx-viewport". here is how my script looks like:

$( "img.Banner" ).attr( "id", "first-slide" );
$('.bxslider').bxSlider({
  adaptiveHeight: true,
  mode: 'horizontal',
  auto: true
  });
$("#first-slide").load(function(){
  var height = $(this).height();
   $( ".bx-viewport" ).css( "height", height );
});

Answer 5

"romelmederos" on the bxslider github page suggested;

---

"BxSlider v4.1 - Having issues with the rendering of the slider since I am using percentages for the height in a responsive web site for mobile.

So I had to make the change from: slider.viewport.css('height', getViewportHeight()); to this: slider.viewport.css('height', '');

I altered the plugin with an option instead in my copy, but the quickest way to change is by modifying the line above"

---

I edited my jquery.bxslider.js on line 1290; This worked great for me and seems a better solution than window.load, (with window.load the slider was busted until everything loaded.)

Answer 6

It could be that you're calling the bxSlider function too early. If you're invoking it from

$(document).ready(function() { ... });

consider instead using

$(window).load(function() { ... });

The difference between using those two functions is that (document).ready waits until the DOM has been shown to the user in it's initial state, whereas (window).load actually waits until all resources have been loaded onto the DOM.