如何讓bxSlider隱藏幻燈片，直到頁面加載？

Question

我正在構建一個使用bxSlider的網站。

當頁面加載時，所有的幻燈片都是可見的，堆疊在一起。頁面完全加載後，第一張幻燈片將保持可見狀態，其餘部分將消失，以便滑塊可以一次一個動畫並顯示它們。

我試過使用各種CSS和bxSlider回調來隱藏幻燈片，直到頁面完全加載，但沒有運氣。有誰知道如何做到這一點？

謝謝！

Answer 1

我有同樣的問題，這招幫了我：

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

放高度和溢出值滑塊的UI元素上。

問候

Answer 2

將一個div多數民衆贊成包裝的所有內容，並把style="display:none"就可以了。然後在你調用bxslider之後，只需顯示它。

EX：

<script type="text/javascript"> 
$(document).ready(function(){ 

    $('.bxlider').bxSlider({ 
     displaySlideQty : 5, 
     prevText : "", 
     nextText : "", 
     moveSlideQty : 5, 
     infiniteLoop : false 
    }); 
    $(".bxsliderWrapper").show("fade"); 
}); 
</script> 

Answer 3

不是答案本身，而是有沒有人注意到這個錯誤，所有的opactity列表中的項目（一個或多個）被設置爲1？我相信最初的setChildrenFade並沒有被要求放映幻燈片的初始化。

更新時間：

我已經設法通過增加對它進行排序：

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

要開始放映功能。

在調用GoToSlide之前，看起來setChildrenFade不會被設計調用。也許這是一個錯誤，因爲如果列表項目的背景設置爲透明，您纔會真正注意到問題，否則z：index會處理隱藏在初始開始處的問題。

希望這會有所幫助。

Answer 4

我有同樣的問題，得到了周圍這樣說：

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

然後

$(document).ready(function(){ 
     $('.mySlider').show().bxSlider({ 
     slideWidth: 160, 
     minSlides: 2, 
     maxSlides: 5, 
     preloadImages: 'all' 
     }); 
    }); 

Answer 5

我不知道究竟風格=「顯示：無」的方法，但是，當「使用jQuery bxSlider的容器隱藏（）/ fadeOut（）「，然後在init bxSlider之後，它會在標記中出現錯誤。（可能使用顯示：沒有人會避免錯誤，但如果你想淡出你的滑塊，我的方法是appliable）

只是定位您的容器作爲「絕對」的CSS和您的JS bxSlider的初始化之前它移動到頁面的不可見部分，初始化它，然後隱藏它，它恢復到前點，最後淡入：

$("#bxslider-container").css({'left' : "4000px"}); 
$('.bxslider').bxSlider(); 
$("#content-wrapper").hide().css({'left' : "0px"}).fadeIn(2000); 

希望對大家有所幫助

Answer 6

我最終什麼事加入做一些CSS隱藏除第一張幻燈片外的所有內容。

沒有額外的標記或行爲要求，並適用於所有主流瀏覽器！

.bxslider { 
    li { 
    display: none; 

    &:first-child { 
     display: block; 
    } 
    } 
} 

Answer 7

bxslider具有當滑動件被加載（onSliderLoad）.I設置可見性爲隱藏在容器DIV，然後使用回調來設置的可見性爲回調「可見」。

<div id="siteslides" style="visibility: hidden;"></div> 

$(".site_banner_slider").bxSlider({ 
    auto: true, 
    slideWidth: $imageWidth, 
    mode: 'fade', 
    onSliderLoad: function(){ 
     $("#siteslides").css("visibility", "visible"); 
     } 
    }); 

Answer 8

有這個問題。我使用下面的標記，並最初隱藏包含<div class="bxsliderWrapper">與CSS display: none;我注意到幻燈片的寬度爲012px呈現在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（）完成後觸發重新加載。

。

EDITED

---

原來的解決方案上面的初步制定，但我有問題時，高速緩存硬刷新shift + REFRESH期間被清除。我假設.show()函數所針對的元素沒有及時提供，或者資源尚未加載。 （我猜）下面是這種行爲的修復。

---

相反隱藏含有<div>與display: none;的Bx的滑塊的，我藏使用visibility CSS屬性幻燈片圖像。

.bxslider .slide { 
    visibility: hidden; 
} 

這允許滑塊以正確的尺寸呈現，而無需在屏幕上看到圖像，直到它們準備就緒。然後，我使用由$j(window).load()觸發的jQuery .css()方法在頁面加載後更改可見性。這確保了所有的代碼和元素在顯示之前就已經存在。

<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()方法導致滑塊的所有實例中斷。我只是猜測爲什麼這是一個更好的解決方案，但也許有人可以添加一些信息來更好地理解這一點。

Answer 9

無張貼的解決方案，爲我工作。

使用visibility：hidden的只是導致了頁面上的巨大空白。

對於使用顯示某種原因：無導致沒有幻燈片加載的，只是控制。

這是我能得到某種合理的解決方案的唯一途徑：

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

Answer 10

我CA不記得我在哪找到這個，但我認爲這是最簡單的方法來完成頁面加載時可見的所有幻燈片的問題。

首先周圍添加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"); 
     } 
    }); 
}); 

希望這有助於！

Answer 11

我增加了一個標題和正文div來我的滑塊，所以當它們被加載它都見怪不怪堆疊在頁面的頂部，所以這個職位的幫助下，我設法隱藏幻燈片元素，但顯示加載元件：

正如其他上面已經說了visibility：hidden的類被添加到外層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是隱藏在div你的css和slideloader在你的css中是可見的，但是一旦滑塊加載，兩者都會被交換。希望能幫助到你。

歡呼聲中，李

Answer 12

假設您有：

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。

Answer 13

我用這個CSS和它的工作對上述1200寬度的屏幕，因爲我的滑塊上最大尺寸的寬度，平板電腦的版本是沒有固定的，你也可以嘗試％的量不是像素的這種方式。

.banner是我爲我的bxslider滑塊主體股利。

.banner{overflow: hidden !important; height: 426px;} 
 
@media screen and (max-width: 1200px){.banner{height: auto;}}

<div class="banner"> 
 
    <div class="bx-wrapper"> 
 
     \t \t \t 
 
    </div> \t \t  \t \t  
 
</div>

Answer 14

我想大部分的解決方案，這一點，並發現，他們並沒有足夠的打磨什麼，我要去了。一旦滑塊剛剛出現，我仍然得到一個生澀的演示文稿。使用.fade（）很接近，但它從左上角到右下角的動畫顯得很奇怪。掛鉤到onSliderLoad的偉大工程，但改變能見度仍使滑塊只是出現在屏幕上。我一直在尋找一個多一點優雅的入口等掛鉤，我加的，而不是改變CSS類。

的jQuery：

$('.slider').bxSlider({ 
    auto: false, 
    pager: false, 
    mode: 'fade', 
    onSliderLoad: function(){ 
     $(".slide-clip").addClass('-visible'); 
    } 
}); 

SASS：

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

Answer 15

現代瀏覽器一個快速簡便的只有CSS-溶液（IE10 +）是：

.bxslider { 
    transform: scale(0); 
} 

這工作，因爲最初滑塊將縮小到什麼，但隨後當bxSlider加載它會覆蓋與內嵌樣式變換。