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?
: '(