jquery cycle plugin

jquery cycle plugin is the best plugin I have found for slide show. Its very lightweight and very easy to configure. In this blog we are going to learn few basic things and quick and easy examples.
First we need jQuery Library and cyble plugin. Either you download them or include them using following scripts.

1. <!-- include jQuery library --><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
2.   
3. <!-- include Cycle plugin --><script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script><script type="text/javascript">   
4. </script> 

1. <style type="text/css">  
2. .slideshow { height: 232px; width: 232px; margin: auto }  
3. .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }  
4. </style>  
5.   
6. <!-- include jQuery library -->  
7. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
8. <!-- include Cycle plugin -->  
9. <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>  
10. <script type="text/javascript">  
11. $(document).ready(function() {  
12.     $('.slideshow').cycle({  
13.       fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...  
14.     });  
15. });  
16. </script>  
17.   
18.   
19. <div class="slideshow">  
20.     <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" height="200" width="200">  
21.     <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" height="200" width="200">  
22.     <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" height="200" width="200">  
23.     <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" height="200" width="200">  
24.     <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" height="200" width="200">  
25.     </div>