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 well on mobile devices, tablets etc.

The weird thing is, when I resize the window of the browser(even just for a pixel) the viewport height gets calculated correctly and everything looks fine. But if I refreshed the page with same height and width bx-viewport wouldn't be correctly calculated.

Any idea why this is happening?

HTML looks something like this(and yeah I'm aware that it probably hasn't got anything to do with it, but still):

<ul class="seminars-slider">
    <li>
        <article class="education-article">
            <h3><a href="#"> Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit</a></h3>
            <p>LOL1</p>
            <div class="buttons">
                <a href="#" class="book-button"><span>Book now</span></a>
                <a href="#" class="read-more"><span>Read more</span></a>
            </div>
            <div class="clearall"></div>

        </article>
    <div class="clearall"></div>
    </li>

    // same li
    <li>
        <article class="education-article">
            <h3><a href="#"> Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit</a></h3>
            <p>LOL1</p>
            <div class="buttons">
                <a href="#" class="book-button"><span>Book now</span></a>
                <a href="#" class="read-more"><span>Read more</span></a>
            </div>
            <div class="clearall"></div>

        </article>
    <div class="clearall"></div>
    </li>
</ul>

js call looks like:

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

jQuery('.up-control').click(function() {
    slider.goToNextSlide();
});
jQuery('.down-control').click(function() {
    slider.goToPrevSlide();
});

Thanks.

score 52 · Accepted Answer · answered Feb 13 '13 at 08:21

52

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.

answered Feb 13 '13 at 08:21

Fernando Lujan

650
7
9

@LionLiu I'm a bit late, but glad you found it useful! – Fernando Lujan Mar 20 '15 at 03:57
I'm actually already doing this, as well as setting a timer to reload the height... and it's still coming up shorter than the contents. – Denny Jul 02 '15 at 14:29
1

What if I dont want to wait until the resources are loaded? Since the site has big images and I dont want to let slider wait for that long. I know its a weird case but cant help – Sahil Mittal Jul 23 '15 at 13:03
This does fix the initial problem for me, but the slider just shows the last slide in the list and does not progress to the next slide. Any thoughts on how to fix this? – Stephen Lane Dec 06 '17 at 13:42

score 7 · Answer 2 · edited Aug 12 '16 at 10:51

7

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

edited Aug 12 '16 at 10:51

Gaurav Aggarwal

8,921
5
27
65

answered Nov 06 '14 at 11:26

gokul bs

124
1
6

score 3 · Answer 3 · answered Jul 25 '14 at 16:08

"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.)

score 2 · Answer 4 · edited Aug 12 '16 at 10:42

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)

score 0 · Answer 5 · answered Jul 30 '15 at 17:43

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.

score 0 · Answer 6 · answered Dec 01 '15 at 12:58

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 );
});

bxslider calculating wrong viewport size on load

6 Answers6

Linked