如何让bxSlider隐藏幻灯片直到页面加载？

Question

我正在构建一个使用bxSlider的网站.

当页面加载时,所有幻灯片都可见,堆叠在彼此之上.页面完全加载后,第一张幻灯片仍然可见,其余部分消失,以便滑块可以动画显示它们一次一个.

我已经尝试使用各种CSS和bxSlider回调来隐藏幻灯片,直到页面完全加载,但没有运气.有谁知道如何做到这一点？

谢谢!

Answer 1

加载滑块时,bxslider有一个回调(onSliderLoad).我将可见性设置为隐藏在容器div上,然后使用回调将可见性设置为"可见".

<div id="siteslides" style="visibility: hidden;"></div>

$(".site_banner_slider").bxSlider({
    auto: true,
    slideWidth: $imageWidth,
    mode: 'fade',
    onSliderLoad: function(){
        $("#siteslides").css("visibility", "visible");
      }
  });

Answer 2

我有同样的问题,并以这种方式绕过它:

<div class="mySlider" style="display:none">

然后

$(document).ready(function(){
      $('.mySlider').show().bxSlider({
        slideWidth: 160,
        minSlides: 2,
        maxSlides: 5,
        preloadImages: 'all'
      });
    });

Answer 3

把div它包装好所有内容然后放在style="display:none"上面.然后在调用bxslider之后,只需显示它.

EX:

<script type="text/javascript">
$(document).ready(function(){

    $('.bxlider').bxSlider({
        displaySlideQty : 5,
        prevText : "",
        nextText : "",
        moveSlideQty : 5,
        infiniteLoop :  false
    });
    $(".bxsliderWrapper").show("fade");
});
</script>

Answer 4

所有发布的解决方案都不适合我.

使用可见性:隐藏只会在页面上产生巨大的空白.

出于某种原因使用display:none导致没有加载幻灯片,只导致控件.

这是我能得到某种合理解决方案的唯一方法:

在CSS中:

.ctaFtSlider
{
visibility: hidden;
height: 0;
}   

在功能中:

$(document).ready(function(){
$('.bxslider').bxSlider({
...
onSliderLoad: function(currentIndex){
$(".ctaFtSlider").css("visibility", "visible");
$(".ctaFtSlider").css("height", "auto");
}
});
});

最后,HTML:

<div class="ctaFtSlider">
...
</div>

Answer 5

我最后做的是添加了一些CSS来隐藏除第一张幻灯片之外的所有内容.

无需额外的标记或行为,适用于所有主流浏览器!

.bxslider {
  li {
    display: none;

    &:first-child {
      display: block;
    }
  }
}

Answer 6

我遇到了同样的问题，这个技巧帮助我解决了：

     <ul id="bxSlider" style="padding:0px !important;overflow:hidden;height:385px;">

将高度和溢出值放在滑块的 ul 元素上。

此致