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

• 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

4 Answers 4

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