Question

我的headerlider有这个小jquery滑块代码。你可以看到前一个图像下降到下一个容器。我只想把它保持在它所属的位置并滚动平滑。主要问题似乎是在我的html / css中导致JQuery看起来很干净但不知何故$（＆＃39; .row1＆gt; div：first＆＃39;）出错并显示之前的img。 HTML和CSS可能没有正确的结构，但不要介意，因为slomo比nomo更好。

http://portfolio.jogabonito.fi

＆＃13;

		$(function() {

			$(".row1 > div:gt(0)").hide();

			setInterval(function() {
			  $('.row1 > div:first')
			    .fadeOut(1500)
			    .next()
			    .fadeIn(1500)
			    .end()
			    .appendTo('.row1');
			},  4000);

		});

＆＃13;

* {
    box-sizing:border-box;
}

[class*="col-"] {
	float: left;
	display:block;
	text-align:center;
	
	
	
}

@font-face  {
	
	src:url(fonts/BebasNeue.otf);
	font-family:BebasNeue;
}

.row2 h3 {
	
	font-family:BebasNeue;
	font-size:2.5em;
	color:white;
	background-color:black;
	opacity:0.8;
	
}

.header {
	
	font-family:BebasNeue;
	font-size:5em;
	color:white;
	background-color:black;
	opacity:0.8;
	margin:10%;
	padding:2%;
	position:absolute;
    z-index: 3;
	
}

.caption {
	
	font-family:BebasNeue;
	font-size:2.5em;
	color:white;
	background-color:black;
	opacity:0.8;
	margin:20%;
	padding:2%;
	position:absolute;
    z-index: 3;
	
}



.container1{
	
	height:100vh;
	background-color:rgba(0,0,0,0.8);

}

.container2 {
	

	height:100vh;
	background-color:rgba(0,0,0,0.6);
	
}

.row1 {
	
	height:80vh;
	padding:2%;
	position:relative;
	
	
	
}

.row1 > div {
	
	width:100%;
	height:80vh;
	margin:0;
	padding:0;
	opacity:0.7;
	position:relative;
	
}

.row1 > div img {
	
	width:100%;
	height:100%;
	
}

.row2 {
	
	height:50vh;
	
	
	
}

.row3 {
	
	height:10vh;
	text-align:center;
	font-family:BebasNeue;
	color:white;
	
}


.col-1 {
	
	width:33.33%;
	height:100%;
	margin:8%;
	background-color:tomato;
	opacity:0.8;

	
}



.col-12 {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	padding:2%;
}

＆＃13;

Answer 1

您只需在css中更新此内容：

.row1 > div {
    width:100%;
    height:80vh;
    margin:0;
    padding:0;
    opacity:0.7;
    position:absolute;
}
.row1 > div img {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}

JQuery滑块位置

1 个答案: