更改調整bxSlider的高度

Question

我試圖改變百分比而不是像素的bxslider高度調整，但我對此有點失落。

我的代碼行，使這個調整發現：

slider.viewport.css('height', getViewportHeight()); 

，並在這裏設置視口高度在CSS百分比

slider.viewport.height(getViewportHeight()); 

準確的結果，因爲使用的響應式佈局

感謝。

Answer 1

當我遇到bxSlider的高度在加載時被截斷的問題時，我寫了一個快速補丁，基本上刪除了高度屬性和屬性.bx-viewport，它允許我的CSS規則覆蓋高度，無論我想要什麼。該腳本是最後一個塊。我評論說，因爲你可能不需要它。

• 我不知道你是否想要一張多張幻燈片的旋轉木馬，或者你是否想讓它橫向或縱向滑動，因爲演示沒有運行。所以我做了一個1滑動垂直旋轉木馬。

• 我啓用了adaptiveHeight來向您顯示它具有高度的動態功能，默認情況下，bxSlider只停留在最高幻燈片的大小。

• 所有這些功能都是選項，因爲它們是使它們可選的選項。

• 有2款包括但禁用。如果您想使用該高度固定腳本，則使用第一個。將控制箭頭移到頂部的第二個規則ID。如果你喜歡垂直模式下的滑塊，那麼你很可能想在頂部有你的箭頭控件。如果設置在中間的默認位置，則每次高度發生變化時都會跳轉。

Fiddle

片段

$(document).ready(function() { 
 
    var bx = $('.bxslider').bxSlider({ 
 
    mode: 'vertical', 
 
    adaptiveHeight: true, 
 
    adaptiveHeightSpeed: 750, 
 
    slideWidth: 400, 
 
    minSlides: 1, 
 
    maxSlides: 1, 
 
    moveSlides: 1 
 
    }); 
 
}); 
 

 
/* 
 
document.documentElement.addEventListener('DOMContentLoaded', function(event) { 
 
    event.stopPropagation(); 
 
    var tgt = document.querySelector('.bx-viewport'); 
 
    //tgt.removeProperty('height'); 
 
    //tgt.removeAttribute('height'); 
 
    //tgt.setAttribute('height', '100%'); 
 
}, false); 
 
*/

img { 
 
    display: block; 
 
    margin: 0 auto 
 
} 
 
/* 
 
.bx-viewport { 
 
    height:90vh !important; 
 
    } 
 
*/ 
 
/* 
 
.bx-controls a { 
 
    top:.05% !important; 
 
} 
 
*/

<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
<script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script> 
 

 

 
<div class="bxslider"> 
 
    <div> 
 
    <iframe src="//www.youtube.com/embed/wBdvEdWx2iU" height="200" width="400" id="video1"></iframe> 
 
    </div> 
 
    <div> 
 
    <img src="http://placehold.it/350x666?text=350x666.png" id="image2"> 
 
    </div> 
 
    <div> 
 
    <iframe src="//www.youtube.com/embed/wBdvEdWx2iU" height="200" width="400" id="video3"></iframe> 
 
    </div> 
 
    <div> 
 
    <img src="http://placehold.it/350x350?text=350x350.png" id="image4"> 
 
    </div> 
 
</div>