顯示先前隱藏的div時重新裝載bxSlider

bxSlider具有在特定操作下重新加載滑塊的功能。我初始化多個滑塊我的網頁上以下列方式：顯示先前隱藏的div時重新裝載bxSlider

jQuery('.product_carousel_images').each(function(index,item) { 

    jQuery(item).bxSlider({ 
     mode: 'fade', 
     speed: 600, 
     pause: 7000, 
     auto: false, 
     controls: false, 
     pager: true, 
     pagerCustom: '.product_carousel_pager' 
    }); 

});

使用jQuery easytabs的標籤佈局，第一滑塊在第一（即可見）選項卡，並運行良好，而在產生第二最初隱藏的div。由於bxSlider將滑塊的高度設置爲div，並將display：none設置爲0，所以第二個滑塊具有零高度圖像。可見性：隱藏不是一個選項，因爲標籤界面不允許這樣做。有了這個多滑塊功能，我怎樣才能觸發我的滑塊重新加載特定動作，如點擊標籤標題？

來源

2017-05-18 physalis

嘗試增加給你的CSS'.bx視口{最小高度：90vh;}'根據需要調整。 – zer00ne

@ zer00ne不幸的是，這並不容易:(在大屏幕上，高度變得很大（由於視角的90％），在較小的情況下效果可能會更好，但將視口高度設置爲條件只能導致問題，對吧？ – physalis

根據需要調整，關鍵是如果你在'.bx-viewport'上設置了'min-height'，bxSlider會尊重這個高度，這會在它加載，重新加載，調整大小等時發生。如果你將它設置爲一個小的尺寸，比如說200px，它最初將會是0，它會在一秒內變成200px，然後擴展到它的內容高度。 – zer00ne

我自己不使用bxSlider，但是我猜你可以使用bxSlider的「reloadSlider」功能。

http://bxslider.com/examples/reload-slider

只要保持你的滑塊參考在初始化，然後調用reloadSlider就可以了，只要更改標籤，而你的情況，方便的標籤必須利用easytabs的：事件發生後。

var slider = jQuery(item).bxSlider({ 
    mode: 'fade', 
    speed: 600, 
    pause: 7000, 
    auto: false, 
    controls: false, 
    pager: true, 
    pagerCustom: '.product_carousel_pager' 
}); 
// Reload slider whenever tab changes 
$('#your-tabs-container').bind('easytabs:after', function() { 
    // TODO identify the displayed tab using EasyTabs target panel parameters in order not to reload bxSlider when the wrong tab is displayed 
    slider.reloadSlider(); 
});

上EasyTabs'事件掛接這裏的更多信息： https://os.alfajango.com/easytabs/#configuration

來源

2017-05-19 07:41:05

嗯，我已經在那條路上了，但它實際上並沒有重新加載旋轉木馬。我相信這是由於每個功能，因爲我在第一個和最後一個選項卡上有一個傳送帶。我使用class .tabs作爲輪播容器而不是ID。 – physalis

您確實必須爲每個滑塊保留一個參考並重新加載每個滑塊 –

顯示先前隱藏的div時重新裝載bxSlider

回答

相關問題