Tanmay Nehete
Reputation: 2206
Html Slider Is not Working
My Html Code for slider
<div id="slideshow">
<div>
<img src="5658667829_2bb7d42a9c_m.jpg">
</div>
<div>
<img src="5638093881_a791e4f819_m.jpg">
</div>
My Css Code for slider
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
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;
}
My Jquery Code for slider
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
This is my code for slider which is not working please help for this.
Upvotes: -1
Views: 2901
Answers (2)
Deepu Sasidharan
Reputation: 5309
its working for me. You miss the closing tag of slideshow div. Whatever it is my code is belove
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>slider</title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
<style>
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
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>
</head>
<body>
<div id="slideshow">
<div>
<img src="123.jpg">
</div>
<div>
<img src="321.jpg">
</div>
</div>
</body>
</html>
Upvotes: 1
