Question

我正在为我的网站使用最新的bx滑块，但在页面加载之前，所有幻灯片都可见并叠加在一起。我也试过这个 css

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

的js

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

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

Answer 1

我使用的功能会延迟在加载过程中显示网页。我需要它来阻止FOUC (Flash Of Unstyled Content)，但这也适用于你。

<强>用法

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

<强>段

＆＃13;

$(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);
}

＆＃13;

<!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>

＆＃13;

Answer 2

我所做的是将幻灯片设置为display: none

然后执行bxSlider.bxSlider( onSliderLoad: slide.css('display', 'block'); )

像这样......

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

2 个答案: