我正在构建一个使用 bxSlider 的网站。
当页面加载时，所有的幻灯片都是可见的，彼此堆叠在一起。页面完全加载后，第一张幻灯片仍然可见，其余的则消失，以便滑块可以动画并一次显示一张。
我尝试使用各种 CSS 和 bxSlider 回调来隐藏幻灯片，直到页面完全加载，但没有成功。有谁知道怎么做？
谢谢！
【问题讨论】：
display:hidden 放在包含滑块的元素上，并在 document.ready 处显示它。
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");
}
});
【讨论】：
我遇到了同样的问题并通过这种方式解决了它：
<div class="mySlider" style="display:none">
然后
$(document).ready(function(){
$('.mySlider').show().bxSlider({
slideWidth: 160,
minSlides: 2,
maxSlides: 5,
preloadImages: 'all'
});
});
【讨论】：
放置一个 div 来包装所有内容，并在其上放置一个 style="display:none"。然后在你调用 bxslider 之后，显示它。
前：
<script type="text/javascript">
$(document).ready(function(){
$('.bxlider').bxSlider({
displaySlideQty : 5,
prevText : "",
nextText : "",
moveSlideQty : 5,
infiniteLoop : false
});
$(".bxsliderWrapper").show("fade");
});
</script>
【讨论】：
发布的解决方案都不适合我。
使用 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>
【讨论】：
我最终做的是添加了一些 CSS 来隐藏除第一张幻灯片之外的所有内容。
无需额外的标记或行为，适用于所有主流浏览器！
.bxslider {
li {
display: none;
&:first-child {
display: block;
}
}
}
【讨论】：
.bxslider 元素作为无序列表，我将定位顶级轮播元素，如下所示：.bxslider > * { display: none; }
假设你有：
HTML：
<ul class="slider">
<li>...</li>
<li>...</li>
</ul>
和 jQuery：
jQuery('.slider').bxSlider({
...
});
然后，以下解决方案将通过隐藏除第一个之外的所有幻灯片来解决问题。
CSS：
ul.slider li:nth-child(n+2) {
display: none;
}
当滑块完全加载时，每个活动幻灯片都会自动获得样式display: block。
【讨论】：
我遇到了同样的问题，这个技巧帮助了我：
<ul id="bxSlider" style="padding:0px !important;overflow:hidden;height:385px;">
将高度和溢出值放在滑块的 ul 元素上。
最好的问候
【讨论】：
适用于现代浏览器 (IE10+) 的快速简单的纯 CSS 解决方案是：
.bxslider {
transform: scale(0);
}
这是可行的，因为最初滑块将被缩小到没有，但是当 bxSlider 加载时，它将使用内联样式覆盖转换。
【讨论】：
有同样的问题。我使用下面的标记，最初用 CSS display: none; 隐藏了包含 <div class="bxsliderWrapper"> 我注意到幻灯片 <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>
我的解决方案类似于上面提到的 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() 完成就会触发重新加载。
.
已编辑
上面的原始解决方案最初有效，但在硬刷新shift + REFRESH 期间清除缓存时遇到问题。我假设.show() 函数所针对的元素未及时可用或资源尚未加载。 （我猜）下面是针对这种行为的修复方法。
我没有使用display: none; 隐藏包含<div> 的Bx Slider，而是使用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() 方法导致滑块的所有实例都中断。我只是猜测为什么这是一个更好的解决方案，但也许有人可以添加一些信息来更好地理解这一点。
【讨论】：
我不记得我在哪里找到的，但我认为这是解决所有幻灯片在页面加载时可见的问题的最简洁方法。
首先在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");
}
});
});
希望这会有所帮助！
【讨论】：
我尝试了大多数解决方案，但发现它们不够完善，无法满足我的要求。一旦滑块加载它刚刚出现，我仍然会得到一个生涩的演示文稿。使用 .fade() 很接近，但它的动画从左上角到右下角看起来很奇怪。挂钩 onSliderLoad 效果很好，但更改可见性仍然会使滑块仅出现在屏幕上。我一直在寻找一个更优雅的入口，所以在钩子上，我添加了一个类而不是更改 CSS。
jQuery:
$('.slider').bxSlider({
auto: false,
pager: false,
mode: 'fade',
onSliderLoad: function(){
$(".slide-clip").addClass('-visible');
}
});
SASS：
.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>
【讨论】：
我在我的滑块中添加了标题和文本 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 中的 div，而 slideloader 在你的 CSS 中是可见的，但是一旦滑块加载，两者都会被交换。希望对您有所帮助。
干杯，李
【讨论】：
我不知道确切的 style="display:none" 方法，但是当使用 jQuery bxSlider 的容器“hide()/fadeOut()”并在初始化 bxSlider 之后，它会在标记中呈现错误。 （可能使用 display:none 可以避免错误，但如果您想淡化滑块，我的方法将适用）
在初始化 bxSlider 之前，在 css 和 JS 中将容器定位为“绝对”，将其移动到页面的不可见部分，初始化，然后隐藏，返回到前一点，最后淡入：
$("#bxslider-container").css({'left' : "4000px"});
$('.bxslider').bxSlider();
$("#content-wrapper").hide().css({'left' : "0px"}).fadeIn(2000);
希望对你有帮助
【讨论】：
我使用过这个 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>【讨论】：
本身不是一个答案，但有没有人注意到这个错误，列表项的所有不透明度都设置为 1？我相信初始 setChildrenFade 不会在幻灯片放映的初始化时被调用。
更新：
我已经设法通过添加来对其进行排序：
/**
* Start the slideshow
*/
this.startShow = function (changeText) {
if (options.mode == 'fade') {
setChildrenFade();
}
到开始显示功能。
似乎在调用 GoToSlide 之前，setChildrenFade 不会被设计调用。这可能是一个错误，因为您只有在列表项的背景设置为透明时才会真正注意到问题......否则 z:index 会在初始启动时处理隐藏。
希望这会有所帮助。
【讨论】：