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

时间：2012-07-25 21:04:32

标签： jquery css bxslider

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

当页面加载时，所有幻灯片都可见，堆叠在彼此之上。页面完全加载后，第一张幻灯片仍然可见，其余幻灯片消失，以便滑块可以动画显示它们一次一个。

我尝试使用各种CSS和bxSlider回调隐藏幻灯片，直到页面完全加载，但没有运气。有谁知道怎么做？

谢谢！

15 个答案:

答案 0 :(得分：51)

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");
      }
  });

答案 1 :(得分：29)

我遇到了同样的问题并以这种方式绕过它：

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

然后

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

答案 2 :(得分：13)

放一个包含所有内容的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>

答案 3 :(得分：9)

所有发布的解决方案都不适合我。

使用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>

答案 4 :(得分：7)

我最终做的是添加了一些CSS来隐藏除第一张幻灯片之外的所有内容。

无需额外的标记或行为，适用于所有主流浏览器！

.bxslider {
  li {
    display: none;

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

答案 5 :(得分：4)

假设你有：

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。

答案 6 :(得分：3)

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

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

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

最好的问候

答案 7 :(得分：3)

现代浏览器（IE10 +）的快速简单的CSS解决方案是：

.bxslider {
    transform: scale(0);
}

这是有效的，因为最初滑块将缩小为空，但是当bxSlider加载时，它将覆盖内联样式的变换。

答案 8 :(得分：2)

有同样的问题。我使用了下面的标记，最初用CSS <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>

我的解决方案类似于上面提到的关于使用内置回调函数的 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;
}

这允许滑块以正确的大小渲染，而不会在屏幕上看到图像，直到它们准备就绪。然后我使用.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>

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

答案 9 :(得分：2)

我不记得我发现了什么，但我认为这是解决所有幻灯片在页面加载时可见的最简洁方法。

首先在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; }

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

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

希望这有帮助！

答案 10 :(得分：2)

我尝试了大部分解决方案，并发现它们不够完美，不适合我的目标。一旦滑块加载它刚刚出现，我仍然得到一个生涩的演示。使用.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>

答案 11 :(得分：1)

我已经在我的滑块上添加了一个标题和文本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，你的css中可以看到slideloader，但是一旦滑块加载就会交换掉。希望它有所帮助。

干杯，李

答案 12 :(得分：0)

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

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

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

希望它能帮助

答案 13 :(得分：0)

我已经使用过这个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>

答案 14 :(得分：-2)

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

更新：

我设法通过添加：

对其进行排序 
/**
    * Start the slideshow
    */
    this.startShow = function (changeText) {
      if (options.mode == 'fade') {
                    setChildrenFade();
                }

到开始显示功能。

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

希望这有帮助。

相关问题
最新问题