高度無法調整LayerSlider 5

我的最新版本的LayerSlider有問題。我已經使用了全角響應演示中的所有內容，並通讀了所有選項，但是當我調整瀏覽器大小時，高度不會更新。爲了使圖像更清晰，圖像本身也會縮放，但容器的高度保持不變。在文件中說它必須給容器一個高度。高度無法調整LayerSlider 5

我下面的代碼：

HTML：

<div id="LayerSlider" class="Slider"> 
    <div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;"> 
     <img src="/Assets/Images/Layerslider/Banner1.jpg" class="ls-bg" alt="Slide background"/> 
    </div> 
    <div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;"> 
     <img src="/Assets/Images/Layerslider/Banner2.jpg" class="ls-bg" alt="Slide background"/> 
    </div> 
</div>

jQuery的

$(document).ready(function() { 
    $('#LayerSlider').layerSlider({ 
     responsive: false, 
     layersContainer : 1178, 
     responsiveUnder : 1500 
    }); 
});

在文檔說，你必須使用迴應：如果你想使用responsiveUnder這使得它響應假在指定的寬度下。

鏈接LayerSlider http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/

來源

2014-01-15 Dale

嘗試把'肌膚：'fullwidth''在你的JS。 – Vucko

謝謝，但不幸的是沒有運氣。我認爲這可能是我放置

使用jquery在窗口調整大小時更改#layerslider高度。

<script type="text/javascript"> 
     $(window).resize(function() { 
      var newHeight; 
      newHeight = $(window).width(); 
      newHeight = newHeight/2.25 
      newHeight = parseInt(newHeight); 
      // alert(newHeight); 
      $('#layerslider').css('height', newHeight); 
     }); 
    </script>

來源

2015-05-10 03:48:57

如果它是對於響應，你也可以這樣做CSS：'height：44.44vw！important;'而不是使用javascript來實現這個伎倆（44.44相當於2.25的百分比） –

我有完全相同的問題。在我的情況下，這是由於css樣式的重複，當我們將網站遷移到liferay cms（它添加了各種html）時。我們重構了一些站點，並將這些layerslider.css複製並粘貼到文檔中（因此我們可以在不必部署主題的情況下對其進行編輯） - 但從未刪除原始的css文件。刪除樣式是固定高度計算。顯然，JavaScript使用您爲高度和寬度設置的CSS樣式來計算圖像，文本和父容器大小。

希望這會有所幫助。

來源

2015-05-22 21:52:16

我用css中斷點來修復層Slider的高度問題。使用圖層滑塊的css編輯器。

@media only screen and (min-width:800px) and (max-width:960px) { 
.ls-wp-fullwidth-container { 
    height: 65vh!important; 
} 
@media only screen and (min-width:768px) and (max-width:800px) { 
    .ls-wp-fullwidth-container { 
     height: 50vh!important; 
    } 
} 
@media only screen and (min-width:600px) and (max-width:768px) { 
    .ls-wp-fullwidth-container { 
     height: 42vh!important; 
    } 
} 
@media only screen and (min-width:480px)and (max-width:600px) { 
    .ls-wp-fullwidth-container { 
     height: 33vh!important; 
    } 
    }

- icodefy

來源

2017-07-09 07:55:31 suriish

相關問題