在bxslider jquery插件中未正確設置視口高度

我正在使用bx滑塊jquery插件。有時候視口高度設置不正確。當滑塊第一次加載時會發生這種情況。如果我點擊下一個或上一個按鈕，一旦視口設置正確。我檢查bxSlider.js也，它也返回了錯誤的值。這表明，只有一個孩子（圖片），但我使用5個圖像。我將寬度設置爲250像素，但返回953像素。下面的插件是我使用的。在bxslider jquery插件中未正確設置視口高度

https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css http://bxslider.com/js/jquery.min.js https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.fitvids.js https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.easing.1.3.js

來源

2016-07-11 Kallis

你應該考慮建立一個[jsfiddle.net（的jsfiddle），或使用在線代碼編輯器 – fehrlich

https://jsfiddle.net/ – fehrlich

我不喜歡一個widget – Kallis

如果有改變你的網頁的加載，說喜歡添加額外的插件，bxSlider將無法完成它的計算，直到有一個它不會完成它重繪。通常通過使bxSlider移動下一個或prev來完成。我通過強制bxSlider在加載時重新計算來解決此問題。這裏有兩個建議，第一個是被動和最小的，第二個是積極和過度的。我建議自己嘗試第一個，如果它不起作用，請將它們兩個一起使用。

修復＃1。以下規則集添加到您的樣式表或者底部，或者<style>塊的最後一行：

.bx-viewport.bx-viewport { min-height: 90vh !important; }

這對類選擇翻倍可能看起來很奇怪，但它會增加選擇的選擇性，!important和雙選擇器一樣是可選的。這是修復＃1到它的要領：

.bx-viewport { min-height: 90vh; }

修復＃2。將收盤</body>標籤之前這個JS：

document.documentElement.addEventListener('DOMContentLoaded', function(event) { 
    var $tgt = $('.bx-viewport')[0]; 
    var tgt = document.querySelector('.bx-viewport'); 
    tgt.style.height = "" 
    tgt.removeAttribute('height'); 
    tgt.style.removeProperty('height'); 
    $tgt.css('height', ''); 
    $tgt.removeAttr('height'); 

}, false);

大多數使用修正＃1的時間就足夠了。 修復＃2是過度的，但它始終有效。

來源

2016-07-12 01:26:34 zer00ne

但如何設置高度根據多少滑塊我想diplay？ – Kallis

bxSlider已經爲你計算了。有一個選項可以用來決定bxSlider如何處理高度。默認情況下，bxSlider會查找最高內容並將所有幻燈片設置在該高度。如果您設置選項：'adaptiveHeight：true'，則bxSlider將調整爲每張幻燈片的高度。順便說一句，90vh可以是任何你喜歡的高度，我使用90vh，因爲我的滑塊佔據了大部分視口。由於您沒有提供任何代碼，因此我無法幫助您提供特定的號碼。我對自己的回答充滿信心，因爲我現在遇到了確切的問題。 – zer00ne

在bxslider中，我將無限循環設置爲true infiniteLoop：true .i添加了5個圖像和2個視頻。但它需要很多克隆，因此無法正常工作。它需要2個視頻克隆和2個圖像clone.so，這是行不通的。你有任何解決這個問題？ – Kallis

在bxslider jquery插件中未正確設置視口高度

回答

相關問題