Saturday, December 31, 2011

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:

No comments: