Response title
This is preview!
I have used the jquery slide show plugin, when it running the slide show every time last div element is displaying after every div element, I want to show the slide show one after another.
in Getting Started
•
2 years ago
<div id="slideshow">
<div>
<img src="images/mlb-2.jpg" width="400" height="300" />
</div>
<div>
<img src="images/mlb-3.jpg" width="400" height="300" />
</div>
<div>
<img src="images/mlb-4.jpg" width="400" height="300" />
</div>
<div>
<img src="images/mlb-4.jpg" width="400" height="300" />
</div>
<div>
<img src="images/mlb-1.jpg" width="400" height="300" />
</div>
</div>
JQuery Code
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 6000);
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 6000);
CSS
#slideshow {
margin: 50px auto;
position: relative;
width: 400px;
height: 300px;
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;
}
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
1
