jquery cycle example

When I came across this plugin and simple example first thing came to my minde that how to add “previous and Next” Button in slide show, so lets do it. I am using same HTML Code & CSS style used in“JQuery Cycle Plugin – Basic Example 2″. Please refer that so that you can understand.

1. <div id="slide1" class="pics">  
2.     <img src="images/beach1.jpg" height="200" width="200">  
3.     <img src="images/beach2.jpg" height="200" width="200">  
4.     <img src="images/beach3.jpg" height="200" width="200">  
5. </div>  
6. <div class="nav"><a href="#" id="prev">Prev</a> <a href="#" id="next">Next</a></div>  

CSS Style for previous and Next buttona long with configuration.

Example 1: jQuery cycle plugin previous and Next links for slider.

1. $('#slide1').cycle({  
2.     fx:     'fade',  
3.     speed:  'fast',  
4.     timeout: 0,  
5.     next:   '#next',  
6.     prev:   '#prev'  
7. });  

Example 2: jQuery cycle plugin auto rotation. hover to pause, click to see next image.

1. $('#slide1').cycle({  
2.     fx:     'fade',  
3.     speed:   300,  
4.     timeout: 3000,  
5.     next:   '#s3',  
6.     pause:   1  
7. });  

Example 3: jQuery cycle plugin – show numeric pagination.

1. $('#slide1')  
2. .before('  
3. <div id="nav">')  
4. .cycle({  
5.     fx:     'turnDown',  
6.     speed:  'fast',  
7.     timeout: 0,  
8.     pager:  '#nav'  
9. });  
10. </div>  

Quick Tips

1. /* How to stop slide show  */  
2. $('#slideshow').cycle('stop');  
3.   
4. /* How to pause slide show  */  
5. $('#slideshow').cycle('pause');  

Share this nice post: