BXslider第一次在谷歌浏览器上无法正确加载，然后在刷新后正确加载

Question

我在这个网站上使用了多个BX滑块，除了这个之外，它们运行良好如果在您使用的浏览器上没有发生这种情况，则滑块最终会这样，直到页面再次刷新请帮忙！此页面是发生这种情况的唯一位置。（我也在架构链接中使用了 bx滑块，没有麻烦）下面是滑块脚本：

        $(document).ready(function(){
        $('.bxslider').bxSlider({
        infiniteLoop: false,
        hideControlOnEnd: true,
        pager: false
        });
        });

Answer 1

在幻灯片中加载图像之前，滑块似乎正在实例化，因此无法准确检测幻灯片尺寸。

使用加载的图像（http://imagesloaded.desandro.com/）之类的东西应该对您有所帮助。

使用 imagesloaded 函数包装您的代码，如下所示：

$('.bxslider').imagesLoaded( function() {
  // images have loaded
  $('.bxslider').bxSlider({
    infiniteLoop: false,
    hideControlOnEnd: true,
    pager: false
    });
});

我还会以 css 不透明度隐藏图像，直到滑块实例化，然后淡化它们。

Answer 2

我不确定您是否已经解决了问题。我也有同样的想法。我的问题是我使用了3.x jQuery。切换到 1.x，一切都神奇地工作。确切原因未知。

1.x 适合您：https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js