0
私は自分のサイトのスライダーを作成しますが、それはうまくいきます。問題は、イメージが滑っているときにサイトの高さが大きくなることです。それを修正するには？スライダは#opinionsPanelの内側にあります。私はhttps://github.com/mituraTomasz/stronka/tree/master/stronkaに完全なプロジェクトを入れました。助けてください！スライダーイメージ拡大サイトの高さ
$(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>
コードを共有してください。 – Ehsan
コードを付けてreposytoriumへのリンクを追加しました。ここにコードを入れなければならない場合、800行のコードになります！ –