bxslider calculating wrong viewport size on load

问题

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.

回答1:

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.

回答2:

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

回答3:

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

回答4:

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)

回答5:

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.

回答6:

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

来源：https://stackoverflow.com/questions/13722282/bxslider-calculating-wrong-viewport-size-on-load

标签

jquery

css

bxslider