如何讓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隱藏所有幻燈片，直到頁面加載

回答

相關問題