如何使BxSlider隐藏所有幻灯片直到页面加载

ub_303 发表于 Dev

ub_303

我正在为我的网站使用最新的bx滑块，但是在页面加载之前，所有幻灯片都是可见的并且彼此堆叠。我已经试过这其中也
CSS

.ctaFtSlider{
   visibility: hidden;
   height: 0;
}

$(document).ready(function(){
     $('.bxslider').bxSlider({
           ...
           onSliderLoad: function(currentIndex){
           $(".ctaFtSlider").css("visibility", "visible");
           $(".ctaFtSlider").css("height", "auto");
        }
    });
});

当我这样做时，页面加载后bx滑块被隐藏了。

zer00ne

我使用的功能会在加载过程中延迟使网页可见。我需要它来防止FOUC（未样式化内容的闪烁），但这也可能对您有用。

用法

的CSS

Add this rule:

   body { visibility: hidden; }

的HTML

Add this to `<body>` tag:

   <body onload="delay(1500);">

JS / jQ

    // t is in ms | 1000ms = 1sec

function delay(t) {
  setTimeout('initFadeIn()', t);
}

function initFadeIn() {
  $("body").css("visibility", "visible");
  $("body").fadeIn(500);
}

SNIPPET

$(function() {
  $('.bx').bxSlider({
    pager: false
  });
});

// t is in ms | 1000ms = 1sec

function delay(t) {
  setTimeout('initFadeIn()', t);
}

function initFadeIn() {
  $("body").css("visibility", "visible");
  $("body").fadeIn(500);
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>36646468</title>
  <link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
  <style>
    body {
      visibility: hidden
    }
    img {
      margin: 0 auto;
      }
  </style>
</head>

<body onload="delay(1500);">

  <section class="bx">

    <div>
      <img src="http://placehold.it/320x180/000/fff?text=1">
    </div>

    <div>
      <img src="http://placehold.it/320x180/00f/fc0?text=2">
    </div>

    <div>
      <img src="http://placehold.it/320x180/fc5/ba6?text=3">
    </div>

    <div>
      <img src="http://placehold.it/320x180/0bb/0ff?text=4">
    </div>

    <div>
      <img src="http://placehold.it/320x180/f3a/52f?text=5">
    </div>

    <div>
      <img src="http://placehold.it/320x180/fff/000?text=6">
    </div>

  </section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
  <script>
  </script>
</body>

</html>