I've been experimenting with different methods to include captions in my slideshow, but haven't had much success. I simply want to add a div at the bottom of each image. Do I need to modify my script or should I consider adding something else?
HTML:
<div class="minislider">
<img src="http://www.no-margin-for-errors.com/wp-content/themes/NMFE/images/fullscreen/1.jpg" />
<img src="http://www.no-margin-for-errors.com/wp-content/themes/NMFE/images/fullscreen/2.jpg" />
<img src="http://www.no-margin-for-errors.com/wp-content/themes/NMFE/images/fullscreen/3.jpg" />
<img src="http://www.no-margin-for-errors.com/wp-content/themes/NMFE/images/fullscreen/4.jpg" />
</div>
CSS:
.minislider {
width: 321px;
height: 242px;
background-color: #649696;
position: relative;
float: left;
left: 76px;
top: 11px;
border-radius: 10px 10px 10px 10px;
}
.minislider img {
width: 311px;
height: 232px;
position: absolute;
left: 5px;
top: 5px;
}
JQUERY:
$(document).ready(function (){
$('.minislider img:gt(0)').hide();
setInterval(function(){
$('.minislider :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.minislider');
}, 3000);
});