I was creating a jQuery slider and I can't get the slider to even work... Can someone help me out with this question?
Much appreciated if anyone can help!...
Here is my code:
HTML:
<div id="slider img">
<div id="slideshow">
<div>
<img src="img1.png">
</div>
<div>
<img src="img2.png">
</div>
<div>
<img src="img3.png">
</div>
</div>
</div>
CSS:
#slideshow {
margin: 50px auto;
position: relative;
width: 1200px;
height: 488px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
jQuery:
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
Full Code:
<------------CSS------------>
</head>
<style>
#slideshow {
margin: 50px auto;
position: relative;
width: 1200px;
height: 488px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
</style>
<---------jQuery is here----------->
<script>
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
</script>
<body>
<---------Html---------->
<div id="slider img">
<div id="slideshow">
<div>
<img src="img1.png">
</div>
<div>
<img src="img2.png">
</div>
<div>
<img src="img3.png">
</div>
</div>
</div>
</body>
</html>
Please Respond a.s.a.p!
Thanks!
