Tomsz Comasz Tomsz Comasz - 3 months ago 27
jQuery Question

Slider image enlarge site height

I create slider for my site but it dosent works well.The problem is when image is sliding down, it enlarge my site height. How to fix it? Slider is inside #opinionsPanel, at bottom of site. I put full project on https://github.com/mituraTomasz/stronka/tree/master/stronka .Please help!



$(document).ready(function() {

var duration = 10000;
var imageUrl = "/img/slider/slider";
var counter = 1;

function runSlider() {

if (counter == 4) {
counter = 1;
} else {
counter++;
}
$("#slider").fadeOut("fast", function() {
$("#slider")
.html("<img src=" + imageUrl + counter + ".jpg alt='slider'>")
.fadeIn("fast", "linear");

if (counter % 2 == 1) {
$("#slider img")
.animate({
top: '-=400px'
}, 0)
.animate({
top: '+=400px'
}, duration);
} else {
$("#slider img").animate({
top: '-=400px'
}, duration);
}
});

}
runSlider();
setInterval(runSlider, duration + 1000);


});

body{
height: 700px;
background-color: brown;

}

#slider {
padding: 0;
margin: 0;
width: 100%;
height: 600px;
filter: blur(2px);
//background-size:cover;
//background-position: 50%;

}
img {
background-size: cover;
position: absolute;
//top: 2200px;
//vertical-align: top;
//overflow:hidden;
z-index: -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<div id="opinionsPanel">
<div id="opinionsContent">
<div id="slider">
</div>
<p><span></span>
</p>
</div>
</div>

</body>




Answer

your css has .img { top: 2200px } this will position all images 2200 pixels from the top. this is why the height of the page is enormous.