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

我为我的网站使用了最新的bx滑块，但是在加载页面之前，所有幻灯片都可见并堆叠在彼此之上。当我这样做的BX滑块得到了页面加载后隐藏我已经试过这其中也
CSS如何让BxSlider隐藏所有幻灯片，直到页面加载

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

的js

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

。

来源

2016-04-15 ub_303

你为什么把高度设为0？ BxSlider可能会将其用于动态计算。如果高度为0，则随后的元素高度也可能变为0. – Abhi

并且如果您希望如果对于页面加载，则将其包装在“窗口加载”事件中 – Abhi

您能否稍微解释一下 –

我使用了一个函数，可以在加载过程中使网页延迟显示。我需要它来防止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); 
}

代码片段

$(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>

来源

2016-04-16 06:20:32 zer00ne

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

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

类似的东西...

来源

2016-08-17 11:42:19 shelune

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

回答

相关问题