Simple Slider using jQuery

This is a simple image slider using pure jQuery

by Roberto Apasajja

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>Alter Apfelbaum</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>Ruth St Flowers-191</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>Canada Close In.</p>
	</li>
</ul>

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; 
}

JavaScript

$(function(){
	$('#slider li').hide().filter(':first').show();
	setInterval(slideshow, 3000);
});

function slideshow() {
	$('#slider li:first').fadeOut('slow').next().fadeIn('slow').end().appendTo('#slider');
}