$(function(){
$('#slider li').hide().filter(':first').show();
setInterval(slideshow, 3000);
});
function slideshow() {
$('#slider li:first').fadeOut('slow').next().fadeIn('slow').end().appendTo('#slider');
}
Css
#slider {
position:relative;
margin:0;
padding:0;
list-style-type:none;
width:650px;
height:430px;
border: 1px solid #008000;
overflow:hidden;
}
#slider li {
position:absolute;
}
#slider img {
width:650px;
height:430px;
}
#slider p {
position:absolute;
bottom:0;
padding:20px;
color:#ffffff;
background-color: #008000;
opacity: 0.6;
margin:0;
left:0;
right:0;
}
HTML
<ul id="slider">
<li>
<a href="https://flic.kr/p/pq1UFA">
<img src="https://c4.staticflickr.com/4/3867/15367978792_acd632254d_h.jpg" alt="Alter Apfelbaum"/>
</a>
<p>Slide 1</p>
</li>
<li>
<a href="https://flic.kr/p/ppXtn4">
<img src="https://c3.staticflickr.com/3/2942/15367308281_cf8a164414_h.jpg" alt="Ruth St Flowers-191"/>
</a>
<p>Slide 2</p>
</li>
<li>
<a href="https://flic.kr/p/pq5a4k">
<img src="https://c4.staticflickr.com/4/3862/15368612485_251ef5de2f_h.jpg" alt="Canada Close In."/>
</a>
<p>Slide 3</p>
</li>
</ul>