Slider Loading Problems - Height

Asked

Viewed 212 times

0

I’m using a plugin to make a slider, called Slick. http://kenwheeler.github.io/slick/

I’m leaving the image of the slider with width: 100% so that the image is good from the resolution 1280px.

But when I leave it so height of the parent element that receives the slider entries gets value auto. And that way in the page load gives a violent BUG. It takes the slider images and puts one underneath the other, after 1 second or less, that the height fits the image size. Even if I put overflow: hidden in the parent element this happens.

Now if I take the width: 100% image and let it get big does not happen this BUG, 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 this BUG does not happen ?

:'(

  • The way you put the code in jsfiddle? It was easier to help you

  • Can’t simulate BUG in Jsfiddle.

  • Why don’t you try to get around it with jquery?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.