bxslider在加载时计算错误的视口大小

Question

无论如何,我最近开始使用bxslider,我遇到了问题.

它似乎在页面加载时错误地计算了它的视口大小,这意味着它在移动设备,平板电脑等上不能很好地工作.

奇怪的是,当我调整浏览器窗口的大小(即使只是一个像素)时,视口高度得到正确计算,一切看起来都很好.但是如果我刷新具有相同高度和宽度的页面,则无法正确计算bx-viewport.

知道为什么会这样吗？

HTML看起来像这样(是的,我知道它可能与它没有任何关系,但仍然):

<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调用看起来像:

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

谢谢.

Answer 1

可能是你太早调用bxSlider函数.如果你正在调用它

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

考虑改为使用

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

使用这两个函数之间的区别在于(document).ready等待DOM向用户显示初始状态,而(window).load实际上等待直到所有资源都加载到DOM上.

Answer 2

您可以使用

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