BXslider第一次在Google Chrome上无法正确加载,然后在刷新后正确加载

时间:2016-05-21 06:37:26

标签: javascript jquery html bxslider

我在这个网站上使用了多个BXsliders,除了this one之外,它们还能很好地运作 如果您在使用的浏览器上没有这样做,this is how滑块最终会再次刷新页面 请帮忙!此页面是发生这种情况的唯一地方。 (我也在建筑链接上使用了一个bxslider,没有麻烦) 这是滑块脚本:

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

2 个答案:

答案 0 :(得分:1)

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

使用像加载的图像(http://imagesloaded.desandro.com/)这样的东西可以帮助你。

使用imagesloaded函数包装代码,如下所示:

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

我还会隐藏带有css不透明度的图像,直到滑块被实例化,然后淡化它们。

答案 1 :(得分:0)

我不确定你是否解决了这个问题。同样的事发生在我身上。 我的问题是我使用了3.x jQuery。转向1.x,一切都神奇地起作用。确切原因不明。

1.x for you: https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js