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

Question

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

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

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

谢谢！

Answer 1

我有同样的问题，这招帮了我：

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

放高度和溢出值滑块的UI元素上。

问候

Answer 2

将一个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 3

不是答案本身，而是有没有人注意到这个错误，所有的opactity列表中的项目（一个或多个）被设置为1？我相信最初的setChildrenFade并没有被要求放映幻灯片的初始化。

更新时间：

我已经设法通过增加对它进行排序：

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

要开始放映功能。

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

希望这会有所帮助。

Answer 4

我有同样的问题，得到了周围这样说：

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

然后

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

Answer 5

我不知道究竟风格=“显示：无”的方法，但是，当“使用jQuery bxSlider的容器隐藏（）/ fadeOut（）“，然后在init bxSlider之后，它会在标记中出现错误。（可能使用显示：没有人会避免错误，但如果你想淡出你的滑块，我的方法是appliable）

只是定位您的容器作为“绝对”的CSS和您的JS bxSlider的初始化之前它移动到页面的不可见部分，初始化它，然后隐藏它，它恢复到前点，最后淡入：

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

希望对大家有所帮助

Answer 6

我最终什么事加入做一些CSS隐藏除第一张幻灯片外的所有内容。

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

.bxslider { 
    li { 
    display: none; 

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

Answer 7

bxslider具有当滑动件被加载（onSliderLoad）.I设置可见性为隐藏在容器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 8

有这个问题。我使用下面的标记，并最初隐藏包含<div class="bxsliderWrapper">与CSS display: none;我注意到幻灯片的宽度为012px呈现在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（）完成后触发重新加载。

。

EDITED

---

原来的解决方案上面的初步制定，但我有问题时，高速缓存硬刷新shift + REFRESH期间被清除。我假设.show()函数所针对的元素没有及时提供，或者资源尚未加载。 （我猜）下面是这种行为的修复。

---

相反隐藏含有<div>与display: none;的Bx的滑块的，我藏使用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()方法导致滑块的所有实例中断。我只是猜测为什么这是一个更好的解决方案，但也许有人可以添加一些信息来更好地理解这一点。

Answer 9

无张贴的解决方案，为我工作。

使用visibility：hidden的只是导致了页面上的巨大空白。

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

这是我能得到某种合理的解决方案的唯一途径：

在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 10

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

首先周围添加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 11

我增加了一个标题和正文div来我的滑块，所以当它们被加载它都见怪不怪堆叠在页面的顶部，所以这个职位的帮助下，我设法隐藏幻灯片元素，但显示加载元件：

正如其他上面已经说了visibility：hidden的类被添加到外层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是隐藏在div你的css和slideloader在你的css中是可见的，但是一旦滑块加载，两者都会被交换。希望能帮助到你。

欢呼声中，李

Answer 12

假设您有：

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。

Answer 13

我用这个CSS和它的工作对上述1200宽度的屏幕，因为我的滑块上最大尺寸的宽度，平板电脑的版本是没有固定的，你也可以尝试％的量不是像素的这种方式。

.banner是我为我的bxslider滑块主体股利。

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

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

Answer 14

我想大部分的解决方案，这一点，并发现，他们并没有足够的打磨什么，我要去了。一旦滑块刚刚出现，我仍然得到一个生涩的演示文稿。使用.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> 

Answer 15

现代浏览器一个快速简便的只有CSS-溶液（IE10 +）是：

.bxslider { 
    transform: scale(0); 
} 

这工作，因为最初滑块将缩小到什么，但随后当bxSlider加载它会覆盖与内嵌样式变换。