Question

我遇到了最新版本的LayerSlider问题。我已经使用了全宽响应演示中的所有内容并阅读了所有选项，但是当我调整浏览器大小时，高度不会更新。为了使图像更清晰，图像本身会缩放，但容器的高度保持不变。在文档中，它说你必须给容器一个高度。

我的代码如下：

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
    });
});

在文档中说你必须使用responsive：false如果你想使用responsiveUnder，它会使它在指定的宽度下响应。

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

Answer 1

您需要做的就是将容器css内联。

<div id="LayerSlider" class="Slider" style="width:100%; height:427px;">

Answer 2

在窗口调整大小时使用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>

Answer 3

我遇到了完全相同的问题。在我的情况下，这是由于css样式的重复，当我们将网站迁移到liferay cms（它添加了各种各样的html）。我们重新构建了一些站点，并将layerslider.css复制并粘贴到文档中（因此我们可以编辑它而无需部署主题） - 但从未删除原始的css文件。删除样式是修复高度计算的原因。显然，javascript使用您为高度和宽度设置的css样式来计算图像，文本和父容器大小。

希望这有帮助。

Answer 4

我使用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

高度不会调整LayerSlider 5的大小

4 个答案: