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

我正在build立一个使用bxSlider的网站。

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

我试过使用各种CSS和bxSlidercallback来隐藏幻灯片，直到页面完全加载，但没有运气。 有谁知道如何做到这一点？

谢谢！

Answer 1

bxslider在加载滑块（onSliderLoad）时有一个callback。我将隐藏在容器div上的可见性设置为可见，然后使用callback将可见性设置为“可见”。

 <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

没有发布的解决scheme为我工作。

使用可见性：隐藏只是导致页面上的巨大空白。

出于某种原因使用显示：没有导致没有幻灯片加载，只是控制。

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

在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来隐藏除第一张幻灯片外的所有内容。

没有额外的标记或行为要求，并适用于所有主stream浏览器！

 .bxslider { li { display: none; &:first-child { display: block; } } } 

Answer 6

我有同样的问题，这个技巧帮助我：

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

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

最好的祝福

Answer 7

有这个相同的问题。 我使用下面的标记，最初用CSS display: none;隐藏了包含<div class="bxsliderWrapper"> display: none; 我注意到幻灯片的宽度<div class="slide">呈现在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> 

我的解决scheme类似于上面提到的关于使用内置callback函数的bradrice 。 我只是将reloadSlider()函数添加到show()函数中。

 <script type="text/javascript"> var $j = jQuery.noConflict(); $j(document).ready(function(){ var homeSlider = $j('.bxslider').bxSlider(); $j(".bxsliderWrapper").show(0, "swing", function(){homeSlider.reloadSlider();}); }); </script> 

一旦show（）完成，它将触发重载。

。

EDITED

---

上面的原始解决scheme最初工作，但我有硬盘刷新shift + REFRESH清除caching时出现问题。 我假设.show()函数所针对的元素没有及时提供，或者资源尚未加载。 （我猜）下面是这种行为的修复。

---

而不是用display: none;来隐藏包含<div>的Bx Slider display: none; ，我使用visibility 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> 

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

Answer 8

我不记得我在哪find这个，但我认为这是最简单的方法来完成页面加载时可见的所有幻灯片的问题。

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

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

接下来，将这行添加到您的css文件，该页面加载时隐藏整个滑块：

 .bxslider-wrap { visibility: hidden; } 

最后，将滑块设置为可见性：当滑块加载时，通过jQuery（在您的js文件中）可见，以使滑块再次可见！

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

希望这可以帮助！

Answer 9

我尝试了大部分的解决scheme，发现他们没有足够的打理我所要做的。 一旦滑块刚刚出现，我仍然得到一个生涩的演示文稿。 使用.fade（）是接近的，但它从左上angularanimation到右下angular看起来很奇怪。 连接到onSliderLoad的效果很好，但是改变可见性仍然会使滑块出现在屏幕上。 我正在寻找一个更优雅的入口，所以在钩子上，我添加了一个类，而不是改变CSS。

jQuery的：

 $('.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> 

Answer 10

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

正如其他人所说的可见性：隐藏类被添加到外部div，但我也添加了一个可见性：可见的类之外，以显示ajax_loader，然后与下面的代码，设置第一隐藏时，幻灯片加载和被设置为可见。 现在，在载入幻灯片的时候，不要有一个难看的空白区域，而是看到一个载入程序，这对用户来说更有意义：

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

我希望这可以帮助，所以slideouter是隐藏在您的CSS和幻灯片放映机是可见的在您的CSS，但都加载滑块后交换。 希望能帮助到你。

干杯，李

Answer 11

假设你有：

HTML：

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

和jQuery：

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

然后下面的解决scheme将通过隐藏所有幻灯片，但第一个幻灯片。

CSS：

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

当滑块满载时，每个活动滑块将自动获取样式display: block 。

Answer 12

适用于现代浏览器（IE10 +）的简单易用的CSS解决scheme是：

 .bxslider { transform: scale(0); } 

这是有效的，因为最初滑块将被缩小到什么都没有，但是当bxSlider加载它时将会用内联样式重写变换。

Answer 13

我不知道确切的style =“display：none”方法，但是当使用jQuery bxSlider的容器“hide（）/ fadeOut（）”时，以及在init bxSlider之后，它会在标记中呈现错误。 （可能使用display：none会避免这个错误，但是如果你想淡化你的slider，我的方法将是可用的）

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

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

希望它会有所帮助

Answer 14

我用这个CSS，它适用于1200宽度以上的屏幕，因为我的滑块是在最大尺寸的宽度，平板电脑版本尚未修复，你也可以尝试用这种方法的％而不是像素的数量。

.banner是我的bxslider滑块的主要div。

 .banner{overflow: hidden !important; height: 426px;} @media screen and (max-width: 1200px){.banner{height: auto;}} 

 <div class="banner"> <div class="bx-wrapper"> </div> </div> 

Answer 15

本身并不是一个答案，但是有没有人注意到这个bug，列表项的所有opactity都被设置为1？ 我相信最初的setChildrenFade并没有被放在幻灯片的初始化上。

更新：

我设法join：

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

到开始显示function。

看来，setChildrenFade不会被devise调用，直到GoToSlide被调用。 也许这是一个错误，因为如果列表项目的背景设置为透明，您才会真正注意到问题，否则z：index会处理隐藏在初始开始处的问题。

希望这可以帮助。