bxslider在加載時計算錯誤的視口大小

無論如何，我最近開始使用bxslider，我遇到了問題。bxslider在加載時計算錯誤的視口大小

這似乎錯誤地計算在頁面加載，這意味着它無法在移動設備，平板電腦等，很好地工作的視口大小

奇怪的是，當我調整瀏覽器的窗口（甚至只是一個像素）的視口高度得到正確計算，一切都很好。但是，如果我使用相同的高度和寬度刷新頁面，bx-viewport將無法正確計算。

任何想法爲什麼會發生這種情況？

HTML看起來像這樣（和親愛的，我知道，它可能還沒有得到任何與它，但仍）：

<ul class="seminars-slider"> 
    <li> 
     <article class="education-article"> 
      <h3><a href="#"> Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit</a></h3> 
      <p>LOL1</p> 
      <div class="buttons"> 
       <a href="#" class="book-button"><span>Book now</span></a> 
       <a href="#" class="read-more"><span>Read more</span></a> 
      </div> 
      <div class="clearall"></div> 

     </article> 
    <div class="clearall"></div> 
    </li> 

    // same li 
    <li> 
     <article class="education-article"> 
      <h3><a href="#"> Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit</a></h3> 
      <p>LOL1</p> 
      <div class="buttons"> 
       <a href="#" class="book-button"><span>Book now</span></a> 
       <a href="#" class="read-more"><span>Read more</span></a> 
      </div> 
      <div class="clearall"></div> 

     </article> 
    <div class="clearall"></div> 
    </li> 
</ul>

JS調用的樣子：

slider=jQuery('.seminars-slider').bxSlider({ 
    mode: 'vertical', 
    controls:false, 
    pager:false, 
    minSlides:2, 
    maxSlides:2, 
    moveSlides:1 
}); 

jQuery('.up-control').click(function() { 
    slider.goToNextSlide(); 
}); 
jQuery('.down-control').click(function() { 
    slider.goToPrevSlide(); 
});

謝謝。

來源

2012-12-05 Matija Milković

可能是因爲您太早調用bxSlider函數。如果你從

$(document).ready(function() { ... });

調用它，而不是考慮使用

$(window).load(function() { ... });

使用這兩個函數之間的區別是，（文件）。就緒等待，直到DOM已被證明用戶處於初始狀態，而（窗口）.load實際上會一直等到所有資源都已加載到DOM上。

來源

2013-02-13 08:21:07 iamvfl

@LionLiu我有點晚，但很高興你覺得它有用！ – iamvfl

我實際上已經這樣做了，並且設置了一個計時器來重新加載高度......並且它仍然比內容短。 – Denny

如果我不想等到資源被加載，該怎麼辦？由於該網站有大圖片，我不想讓滑塊等待那麼久。我知道它是一個奇怪的情況，但不能幫助 –

如果您正在使用ajax加載<ul>元素並且它包含圖像，請在加載後嘗試slider.reloadSlider();。首先，我用

setTimeout('slider.reloadSlider()',1000);

等待圖像加載，但最終我切換到漂亮的圖書館ImagesLoaded將等待圖像加載：

imagesLoaded('.seminars-slider', function() { 
    slider.reloadSlider(); 
});

（改變可變名匹配那些問題）

來源

2014-04-04 07:42:05 diynevala

「romelmederos」在bxslider github頁面上建議;

「BxSlider V4.1 - 與滑塊的渲染，因爲我使用的百分比以快速響應的網站爲移動高度有問題

因此，我不得不做出改變從： slider.viewport.css（'height'，getViewportHeight（））; 對此： slider.viewport。css（'height'，''）;

我改變了一個選項，而不是在我的副本插件，而是要改變最快的方法是通過修改上述」

我修改了上線1290 jquery.bxslider.js行;這個工作非常適合我，似乎比window.load更好的解決方案，（與window.load滑塊被淘汰，直到一切都裝）。

來源

2014-07-25 16:08:52

您可以使用

slider=jQuery('.seminars-slider').bxSlider({ 
    mode: 'vertical', 
    controls:false, 
    pager:false, 
    minSlides:2, 
    maxSlides:2, 
    moveSlides:1 
}); 
setTimeout(function(){ 
      slider.redrawSlider(); 
     },100);

來源

2014-11-06 11:26:51 gokultvm

馬修·w^atson給了我一個好主意，我走進了插件和更新的實際getViewPortHeight（）函數，就像這樣：

var getViewportHeight = function(){ 
    var height = 0; 
    children = slider.children; 
    height = jQuery(slider.children[0]).height();; 
    return height; 
}

所以現在走的是第一圖像的高度在那裏（希望他們都是一樣的...）並使用它來確定滑塊的高度。請注意，您的控件仍將位於滑塊下方，但可以通過css定位等方式進行修復。

希望這可以幫助一些失落的人。

來源

2015-07-30 17:43:44 mattelliottIT

找到了這個safari bug的解決方案。您必須將滑塊的模式設置爲水平（不確定垂直是否也能工作，但漸變根本不起作用）。然後你必須得到第一個圖像的高度並將其傳遞給「.bx-viewport」。這裏是我的腳本如何：

$("img.Banner").attr("id", "first-slide"); 
$('.bxslider').bxSlider({ 
    adaptiveHeight: true, 
    mode: 'horizontal', 
    auto: true 
    }); 
$("#first-slide").load(function(){ 
    var height = $(this).height(); 
    $(".bx-viewport").css("height", height); 
});

來源

2015-12-01 12:58:57

bxslider在加載時計算錯誤的視口大小

回答

相關問題