39

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

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

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

谢谢！

4

15 回答 15

54

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");
      }
  });
于 2013-10-21T18:18:36.227 回答
32

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

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

然后

$(document).ready(function(){
      $('.mySlider').show().bxSlider({
        slideWidth: 160,
        minSlides: 2,
        maxSlides: 5,
        preloadImages: 'all'
      });
    });
于 2013-04-29T15:50:25.913 回答
13

放一个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>
于 2012-08-10T18:32:26.560 回答
9

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

使用可见性：隐藏只会导致页面上有一个巨大的空白区域。

出于某种原因，使用 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>
于 2014-07-20T00:15:42.603 回答
8

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

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

.bxslider {
  li {
    display: none;

    &:first-child {
      display: block;
    }
  }
}
于 2013-10-10T19:01:07.033 回答
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。

于 2015-06-22T13:06:52.160 回答
3

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

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

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

此致

于 2012-07-29T22:36:44.720 回答
3

适用于现代浏览器 (IE10+) 的快速简单的纯 CSS 解决方案是：

.bxslider {
    transform: scale(0);
}

这是可行的，因为最初滑块将被缩小到没有，但是当 bxSlider 加载时，它将使用内联样式覆盖转换。

于 2015-10-23T17:41:33.897 回答
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; }

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

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

希望这可以帮助！

于 2015-02-05T18:17:18.820 回答
2

有同样的问题。我使用了下面的标记，最初<div class="bxsliderWrapper">用 CSS隐藏了包含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() 完成，它就会触发重新加载。

.

已编辑

上面的原始解决方案最初有效，但在硬刷新期间清除缓存时我遇到了问题shift + REFRESH。我假设.show()函数所针对的元素没有及时可用或者资源还没有加载。（我猜）下面是对这种行为的修复。

<div>我没有隐藏包含with的 Bx Slider，而是使用CSS 属性display: none;隐藏了幻灯片图像。visibility

.bxslider .slide {
  visibility: hidden;
}

这允许滑块以正确的大小呈现，而不会在屏幕上看到图像，直到它们准备好。然后我使用触发的jQuery.css()方法$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()方法导致滑块的所有实例都中断。我只是在猜测为什么这是一个更好的解决方案，但也许有人可以添加一些信息来更好地理解这一点。

于 2014-03-04T05:46:16.987 回答
2

我尝试了大多数解决方案，发现它们对我的目标不够完善。一旦滑块加载它刚刚出现，我仍然会得到一个生涩的演示文稿。使用 .fade() 很接近，但它的动画从左上角到右下角看起来很奇怪。挂钩 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>
于 2015-09-05T15:18:35.353 回答
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，而 slideloader 在您的 css 中是可见的，但是一旦滑块加载，两者都会被交换。希望能帮助到你。

干杯，李

于 2015-03-07T13:38:18.200 回答
0

我不知道确切的 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);

希望它会有所帮助

于 2013-06-27T07:19:10.730 回答
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>

于 2015-08-19T07:04:53.923 回答
-2

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

更新：

我设法通过添加来对其进行排序：

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

到开始显示功能。

似乎在调用 GoToSlide 之前，setChildrenFade 不会被设计调用。这可能是一个错误，因为您只有在列表项的背景设置为透明时才真正注意到问题......否则 z:index 会在初始启动时处理隐藏。

希望这可以帮助。

于 2012-08-24T14:18:38.087 回答