bxslider在加载时计算错误的视口大小 [英] bxslider calculating wrong viewport size on load

问题描述

无论如何我最近开始使用bxslider，我有一个问题。

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.

奇怪的是，当我调整浏览器的窗口（即使只是一个像素）的视口高度得到正确计算，一切看起来不错。但是如果我刷新页面的高度和宽度相同，则无法正确计算bx-viewport。

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看起来像这样（是的，我知道它可能没有什么与它有关，但仍然）：

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呼叫如下：

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

谢谢。

推荐答案

这可能是你调用bxSlider函数太早。如果您要从

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

$（document）.ready（function（）{...}）;

请考虑使用

$（window）.load ）{...}）;

使用这两个函数的区别是（document）.ready等待直到DOM显示给处于初始状态的用户，而（window）.load实际上等待直到所有资源都加载到DOM上。

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.

这篇关于bxslider在加载时计算错误的视口大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！