javascript - Height not resizing LayerSlider 5 - Stack Overflow

admin管理员组

文章数量:1353265

Im having trouble with the latest version of LayerSlider. I have used everything from the full-width responsive demo and read through all the options but when I resize my browser, the height does not update. To make this clearer the image itself scales but the container's height stays the same. In the documentation it says that you must give the container a height.

My code below:

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

In the documentation is says you must use responsive: false if you want to use responsiveUnder which makes it responsive under a specified width.

Link to LayerSlider /

Im having trouble with the latest version of LayerSlider. I have used everything from the full-width responsive demo and read through all the options but when I resize my browser, the height does not update. To make this clearer the image itself scales but the container's height stays the same. In the documentation it says that you must give the container a height.

My code below:

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

In the documentation is says you must use responsive: false if you want to use responsiveUnder which makes it responsive under a specified width.

Link to LayerSlider http://kreaturamedia./layerslider-responsive-jquery-slider-plugin/

• javascript
• jquery
• mobile
• plugins
• jquery-plugins

Share Improve this question Follow asked Jan 15, 2014 at 7:04 DaleDale 95522 gold badges99 silver badges2323 bronze badges 4

• Try putting skin:'fullwidth' in your JS. – Vucko Commented Jan 15, 2014 at 7:11
• Thanks, but no luck unfortunately. I thought it could maybe where I have placed the <script> tags but i have put them in the head and after the closing body. No luck :( – Dale Commented Jan 15, 2014 at 8:36
• Do you get any errors in the console when you use skin:'fullwidth'? Also, try putting it before the closing body. – Vucko Commented Jan 15, 2014 at 8:40
• Tried putting it before the closing body - no luck. Also no console errors. If I inspect (firebug) what the layerslider html/css is doing when I resize the browser window neither height of the container or the height of the layers resizes. They resize in the demo. Thanks for your help! – Dale Commented Jan 15, 2014 at 8:56

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

All you need to do is put the container css inline.

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

use jquery to change the #layerslider height when window resize.

    <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>

I had the exact same problem. In my case, it was due to a duplicate of css styles, when we migrated the site to liferay cms (which adds all sorts of html). We restructured some of site and copied and pasted the layerslider.css into the document (so we could edit it without having to deploy the theme) - but never removed the original css file. Removing the styles is what fixed the height calculation. Apparently the javascript uses the css styles you set for height and width to calculate the image, text, and parent container sizes.

Hope this helps.

I used css break point to fix this height issue of the layer Slider. Use the layer slider's css editor.

@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

本文标签： javascriptHeight not resizing LayerSlider 5Stack Overflow