Slider Loading Problems - Height

0

I'm using a plugin to make a slider, called Slick . link

I'm leaving the slider image with width: 100% to make the image look good from 1280px resolution.

But when I leave this way the height of the parent element that receives the slider items gets value auto . And this way in the page load it gives a violent BUG. It takes the slider images and places one below the other, after 1 second or less, that height adapts to the size of the image. Even though I put overflow: hidden on the parent element this happens.

Now if I take the width: 100% of the image and let it get big this does not happen, because the image will have a fixed height, so I delimit it in CSS and BUG does not happen.

CSS

div#slider-main-full {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;

    div.item{
        @include transition(0.5s, 0s);
        margin: 0 auto;
        width: 100%;
        max-width: 1920px;
        position: relative;
        min-height: 100%;

        img{
            width: 100%;            
        }
    }
}

JS

var slick_carousel = $('#slider-main-full');

slick_carousel.slick({
    infinite: true,
    arrows: false,
    focusOnSelect: true,
    autoplay: true,
    speed: 3000,
    lazyLoad: 'progressive',
    cssEase: 'linear',
    fade: true,
    pauseOnHover: false,
    pauseOnFocus: false
}); 

How do I let HEIGHT be automatic and does not happen to that BUG?

: '(

    
asked by anonymous 02.06.2016 / 14:08

0 answers