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
– Miguel
Can’t simulate BUG in Jsfiddle.
– Diego Souza
Why don’t you try to get around it with jquery?
– Miguel