jQuery 如何让 bxSlider 隐藏幻灯片直到页面加载？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11658605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get bxSlider to hide the slides until the page loads?
提问by Nick Petrie
I'm building an website that uses bxSlider.
我正在建立一个使用bxSlider的网站。
As the page loads, all of the slides are visible, stacked on top of each other. Once the page is fully loaded, the first slide remains visible and the rest disappear so that the slider can animate and display them one at a time.
页面加载时，所有幻灯片都可见，并堆叠在一起。页面完全加载后，第一张幻灯片保持可见，其余幻灯片消失，以便滑块可以动画并一次显示一个。
I've tried using various CSS and bxSlider callbacks to hide the slides until the page fully loads, but no luck. Does anyone know how to do this?
我尝试使用各种 CSS 和 bxSlider 回调来隐藏幻灯片，直到页面完全加载，但没有运气。有谁知道如何做到这一点？
Thanks!
谢谢！
回答by bradrice
bxslider has a callback when the slider is loaded (onSliderLoad).I set visibility to hidden on a container div and then use the callback to set the visibility to "visible."
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");
}
});
回答by Ehsan Khaveh
I had the same problem and got around it this way:
我遇到了同样的问题，并以这种方式解决了它：
<div class="mySlider" style="display:none">
then
然后
$(document).ready(function(){
$('.mySlider').show().bxSlider({
slideWidth: 160,
minSlides: 2,
maxSlides: 5,
preloadImages: 'all'
});
});
回答by Bob
Put a divthat's wrapping all the content and put a style="display:none"on it. Then after you call bxslider, just show it.
放置div包装所有内容的 a 并在其style="display:none"上放置 a 。然后在你调用 bxslider 之后，显示它。
EX:
前任：
<script type="text/javascript">
$(document).ready(function(){
$('.bxlider').bxSlider({
displaySlideQty : 5,
prevText : "",
nextText : "",
moveSlideQty : 5,
infiniteLoop : false
});
$(".bxsliderWrapper").show("fade");
});
</script>
回答by Brogan
None of the posted solutions worked for me.
没有一个已发布的解决方案对我有用。
Using visibility:hidden just resulted in a huge blank space on the page.
使用可见性：隐藏只会导致页面上出现巨大的空白空间。
For some reason using display:none resulted in none of the slides loading, just the controls.
出于某种原因，使用 display:none 导致没有加载任何幻灯片，只有控件。
This is the only way I could get some sort of reasonable solution:
这是我可以获得某种合理解决方案的唯一方法：
In the CSS:
在 CSS 中：
.ctaFtSlider
{
visibility: hidden;
height: 0;
}
In the function:
在函数中：
$(document).ready(function(){
$('.bxslider').bxSlider({
...
onSliderLoad: function(currentIndex){
$(".ctaFtSlider").css("visibility", "visible");
$(".ctaFtSlider").css("height", "auto");
}
});
});
Finally, the HTML:
最后，HTML：
<div class="ctaFtSlider">
...
</div>
回答by Jeff Miller
What I ended up doing was added some CSS to hide all but the first slide.
我最终做的是添加了一些 CSS 来隐藏除第一张幻灯片之外的所有内容。
No additional markup or behavior required and works across all major browsers!
不需要额外的标记或行为，适用于所有主要浏览器！
.bxslider {
li {
display: none;
&:first-child {
display: block;
}
}
}
回答by Eleonora Velikova
Suppose you have:
假设你有：
HTML:
HTML：
<ul class="slider">
<li>...</li>
<li>...</li>
</ul>
and jQuery:
和 jQuery：
jQuery('.slider').bxSlider({
...
});
Then the following solution would do the trick by hiding all slides but the first one.
然后，以下解决方案将通过隐藏除第一个幻灯片之外的所有幻灯片来实现这一目标。
CSS:
CSS：
ul.slider li:nth-child(n+2) {
display: none;
}
When the slider is fully loaded each active slide will automatically get style display: block.
当滑块完全加载时，每个活动幻灯片将自动获得样式display: block。
回答by Jonathan Potter
A quick and easy CSS-only solution for modern browsers (IE10+) is:
适用于现代浏览器 (IE10+) 的快速简便的纯 CSS 解决方案是：
.bxslider {
transform: scale(0);
}
This works because initially the slider will be scaled down to nothing but then when bxSlider loads it will override the transform with an inline style.
这是有效的，因为最初滑块将缩小到零，但是当 bxSlider 加载时，它将使用内联样式覆盖变换。
回答by Kire Bananaman
I had the same issue and this trick helped me out:
我遇到了同样的问题，这个技巧帮助了我：
<ul id="bxSlider" style="padding:0px !important;overflow:hidden;height:385px;">
put height and overflow values on the ul element of the slider.
将高度和溢出值放在滑块的 ul 元素上。
Best Regards
此致
回答by user2589301
Had this same issue. I used the markup below and initially hid the containing <div class="bxsliderWrapper">with CSS display: none;I noticed the width of the slides <div class="slide">were rendered at 1px.
有同样的问题。我使用了下面的标记并最初<div class="bxsliderWrapper">用 CSS隐藏了包含display: none;我注意到幻灯片的宽度<div class="slide">呈现为 1px。
I suspect it has something to do with the responsive featured taking the dimensions of the initial container, which was hidden, and defining inline styles for each slide to match.
我怀疑这与响应式功能有关，该功能采用隐藏的初始容器的尺寸，并为每个幻灯片定义内联样式以匹配。
<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>
My solution is similar to what bradricementioned above about using the built in call-back functions. I just added the reloadSlider()function to the show()function instead.
我的解决方案类似于上面提到的关于使用内置回调函数的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>
It triggers the reload once show() is complete.
一旦 show() 完成，它就会触发重新加载。
.
.
EDITED
已编辑
The original solution above worked initially but I had issues when the cache was cleared during a hard refresh shift + REFRESH. I'm assuming the elements targeted by the .show()function were not available in time or the resources were not loaded yet. (I'm guessing) Below is a fix for this behavior.
上面的原始解决方案最初有效，但是在硬刷新期间清除缓存时遇到了问题shift + REFRESH。我假设.show()函数所针对的元素未及时可用或资源尚未加载。（我猜）以下是针对此行为的修复。
Instead of hiding the Bx Slider containing <div>with display: none;, I hid the slide images using the visibilityCSS attribute.
我没有隐藏包含<div>with的 Bx Slider display: none;，而是使用visibilityCSS 属性隐藏了幻灯片图像。
.bxslider .slide {
visibility: hidden;
}
This allows the slider to render at the correct size without seeing the images on screen until they are ready. Then I used the jQuery .css()method triggered by $j(window).load()to change the visibility after the page has loaded. This ensured that all the code and elements existed before displaying them.
这允许滑块以正确的尺寸呈现，而不会在屏幕上看到图像，直到它们准备好。然后我使用.css()触发的 jQuery方法$j(window).load()在页面加载后更改可见性。这确保了所有代码和元素在显示之前都存在。
<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>
This method also worked with multiple sliderson the same page. I found the .show()method caused all instances of the slider to break. I'm only guessing at why this is a better solution but maybe someone can add some info to understand this better.
此方法也适用于同一页面上的多个滑块。我发现该.show()方法导致滑块的所有实例中断。我只是在猜测为什么这是一个更好的解决方案，但也许有人可以添加一些信息来更好地理解这一点。
回答by Jereme Yoho
I tried most of the solutions to this and found that they weren't polished enough for what I was going for. I was still getting a jerky presentation once the slider had loaded with it just appearing. Using .fade() was close, but it animates from top left to bottom right which looked odd. Hooking into onSliderLoad works great, but changing visibility still makes the slider just appear on the screen. I was looking for a bit more of an elegant entrance so on the hook, I added a class instead of changing the CSS.
我尝试了大多数解决方案，发现它们不够完善，无法满足我的要求。一旦滑块加载了它刚刚出现，我仍然得到一个生涩的演示。使用 .fade() 很接近，但它从左上角到右下角动画，看起来很奇怪。挂钩 onSliderLoad 效果很好，但改变可见性仍然会使滑块只出现在屏幕上。我正在寻找一个更优雅的入口，所以在钩子上，我添加了一个类而不是更改 CSS。
jQuery:
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;
}
}
}
I'm using a wrapper to mask my slider as I have a need for it in my case, so for those interested:
我正在使用包装器来掩盖我的滑块，因为在我的情况下我需要它，所以对于那些感兴趣的人：
<div class="slide-clip">
<ul class="slider">
<li style="background-image: url('URL_HERE');"></li>
</ul>
</div>
