Jquery 如何让bxSlider在页面加载之前隐藏幻灯片？

我正在建立一个网站，使用

当页面加载时，所有幻灯片都是可见的，彼此堆叠在一起。页面完全加载后，第一张幻灯片将保持可见，其余幻灯片将消失，以便滑块可以一次一张地设置动画并显示它们

我尝试过使用各种CSS和bxSlider回调来隐藏幻灯片，直到页面完全加载，但没有成功。有人知道怎么做吗

---

谢谢

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

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

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

---

致以最诚挚的问候

放一个包含所有内容的

div

，然后在上面放一个

style=“display:none”

。然后在调用bxslider之后，只需显示它

例：

$（文档）.ready（函数（）{
$（'.bxlider'）.bxSlider({
显示幻灯片数量：5，
前文：“，
下一个文本：“”，
移动滑块数量：5，
无穷远：错
});
$（.bxsliderrapper”）.show（“淡入淡出”）；
});

这本身不是一个答案，但是有没有人注意到，有了这个bug，列表项的所有不透明度都设置为1？我相信在幻灯片放映的初始阶段没有调用最初的setChildrenFade

更新：

我通过添加以下内容对其进行了排序：

/**
    * Start the slideshow
    */
    this.startShow = function (changeText) {
      if (options.mode == 'fade') {
                    setChildrenFade();
                }

启动显示功能

似乎在调用GoToSlide之前，setChildrenFade不会被设计调用。这可能是一个bug，因为只有当列表项的背景设置为透明时，您才会真正注意到问题……否则z:index会在初始开始时处理隐藏

---

希望这能有所帮助。

我也遇到了同样的问题，并通过这种方式解决了它：

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

---

我不知道style=“display:none”方法的确切含义，但是当使用jQuery bxSlider的容器“hide（）/fadeOut（）”时，在初始化bxSlider之后，它将在标记中呈现错误。（可能使用display：没有人可以避免错误，但如果您想使滑块淡入淡出，则可以使用我的方法）

在初始化bxSlider之前，只需在css和JS中将容器定位为“绝对”，将其移动到页面的不可见部分，初始化它，然后隐藏它，将其返回到前一点，最后fadeIn：

$("#bxslider-container").css({'left' : "4000px"});
$('.bxslider').bxSlider();
$("#content-wrapper").hide().css({'left' : "0px"}).fadeIn(2000);

---

希望它能有所帮助

我最后做的是添加一些CSS来隐藏除第一张幻灯片以外的所有幻灯片

无需额外的标记或行为，可在所有主要浏览器中使用

.bxslider {
  li {
    display: none;

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

---

加载滑块时，bxslider有一个回调（onSliderLoad）。我在容器div中将可见性设置为hidden，然后使用回调将可见性设置为“visible”

$（“.site\u banner\u slider”）.bxSlider({
是的，
滑动宽度：$imageWidth，
模式：“淡入淡出”，
onSliderLoad:function（）{
$（“#siteslides”）.css（“可见性”、“可见”）；
}
});
也有同样的问题。我使用了下面的标记，最初用CSS
显示隐藏了包含的
：none
我注意到幻灯片的宽度
呈现为1px

我怀疑这与采用隐藏的初始容器的尺寸，并为每个幻灯片定义内联样式以匹配有关

<div class="bxsliderWrapper">
  <div class="bxslider">
    <div class="slide">Your Content</div>
    <div class="slide">Your Content</div>
    <div class="slide">Your Content</div>
  </div>
</div>

show（）完成后，它将触发重新加载


已编辑


上面的原始解决方案最初工作正常，但在硬刷新期间清除缓存时出现问题
shift+refresh
。我假设
.show（）
函数所针对的元素未及时可用，或者资源尚未加载。（我猜）下面是对这种行为的修复


使用
显示：无隐藏包含
的Bx滑块
，我使用
可见性
CSS属性隐藏幻灯片图像

.bxslider .slide {
  visibility: hidden;
}

这允许滑块以正确的大小渲染，而不必在屏幕上看到图像，直到图像准备就绪。然后，我使用由
$j（window.load（）
触发的jQuery
.css（）
方法在页面加载后更改可见性。这确保了所有代码和元素在显示之前都存在

<script type="text/javascript">

  var $j = jQuery.noConflict();

  $j(document).ready(function(){
    var homeSlider = $j('.bxslider').bxSlider();
  });

  $j(window).load(function(){
    $j(".bxslider .slide").css("visibility", "visible");
  });

</script>


var$j=jQuery.noConflict（）；
$j（文档）.ready（函数（）{
var homeSlider=$j（'.bxslider'）.bxslider（）；
});
$j（窗口）.load（函数（）{
$j（“.bxslider.slide”）.css（“可见性”、“可见”）；
});

该方法还可在同一页上使用多个滑块。我发现
.show（）
方法导致滑块的所有实例都中断。我只是在猜测为什么这是一个更好的解决方案，但也许有人可以添加一些信息来更好地理解这一点。
所有发布的解决方案都不适合我

使用visibility:hidden只会在页面上留下巨大的空白

出于某种原因，使用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>


...
我不记得是在哪里找到的，但我认为这是完成这一问题的最干净的方法，所有幻灯片都可以在页面加载时看到

首先在bxslider无序列表周围添加一个div：

<div class="bxslider-wrap">
    <ul class="bxslider">
        <li>Image / Content </li>
        <li>Image / Content </li>
        <li>Image / Content </li>
    </ul>
</div>

最后，在加载滑块时，将滑块设置为visibility:visible via jQuery（在js文件中），以使滑块再次可见

jQuery(document).ready(function($) {
    $('.bxslider').bxSlider({
        onSliderLoad: function(){ 
            $(".bxslider-wrap").css("visibility", "visible");
        }
    }); 
});

希望这有帮助
 我在我的滑块中添加了一个标题和文本div，因此当他们加载时，所有内容都堆积在页面顶部，因此在这篇文章的帮助下，我设法隐藏了幻灯片元素，但显示了一个加载元素：

正如上面其他人所说，在外部div中添加了一个visibility:hidden类，但我也在其外部添加了一个visibility:visible类来显示一个ajax\u加载程序，然后使用
$(document).ready(function(){
$('.bxslider').bxSlider({
...
onSliderLoad: function(currentIndex){
$(".ctaFtSlider").css("visibility", "visible");
$(".ctaFtSlider").css("height", "auto");
}
});
});

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

<div class="bxslider-wrap">
    <ul class="bxslider">
        <li>Image / Content </li>
        <li>Image / Content </li>
        <li>Image / Content </li>
    </ul>
</div>

.bxslider-wrap { visibility: hidden; }

jQuery(document).ready(function($) {
    $('.bxslider').bxSlider({
        onSliderLoad: function(){ 
            $(".bxslider-wrap").css("visibility", "visible");
        }
    }); 
});

jQuery(document).ready(function($) {
$('.bxslider').bxSlider({
    onSliderLoad: function(){ 
        $(".slideouter").css("visibility", "visible");
        $(".slideloader").css("visibility", "hidden");
    },
   autoControls: true,
  auto: true,
  mode: 'fade'
}); 

<ul class="slider">
<li>...</li>
<li>...</li>
</ul>

jQuery('.slider').bxSlider({
        ...
});

ul.slider li:nth-child(n+2) {
    display: none;
}

$('.slider').bxSlider({
    auto: false,
    pager: false,
    mode: 'fade',
    onSliderLoad: function(){
        $(".slide-clip").addClass('-visible');
    }
});

.slide-clip {
    opacity:0;
    max-width: 1305px;  // Used as a clipping mask
    max-height: 360px; // Used as a clipping mask
    overflow:hidden;  // Used as a clipping mask
    margin:0 auto;
    transition(all 275ms);
    &.-visible {
        transition(all 275ms);
        opacity:1;
    }

<div class="slide-clip">
    <ul class="slider">
        <li style="background-image: url('URL_HERE');"></li>
    </ul>
</div>

.bxslider {
    transform: scale(0);
}