Advanced Search

Jquery - 2 cycles 1 pager (stop on click)

/ Published in: JavaScript
Save to your folder(s)
all pagers with class of .slideshow

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script type="text/javascript">
  2.  
  3. var clickedBtn = 'no';
  4.  
  5. $(document).ready(function() {
  6. 	$('.slideshow').each(function(index) {
  7. 		$(this).cycle({
  8. 		fx:     'fade',
  9. 		timeout: 4000,
  10. 		speed:   2000,
  11. 		sync:    true,
  12. 		pager:  '#slideBtns',
  13. 		after: onAfter,
  14. 		pagerAnchorBuilder: function(i) {
  15. 			if (index == 0)
  16. 			// for first slideshow, return a new anchor
  17. 			return '<a href="#" onclick="pagerClick();">'+(i+1)+'</a>';
  18. 			// for 2nd slideshow, select the anchor created previously
  19. 			return '#slideBtns a:eq('+i+')';
  20. 			}
  21. 		});
  22. 	});
  23. });
  24.  
  25.  
  26. function pagerClick() { 
  27. 	clickedBtn = 'yes';
  28. }	
  29.  
  30. function onAfter() { 
  31. 	if (clickedBtn == 'yes') {
  32. 		$('.slideshow').cycle('pause');	
  33. 	}
  34. }
  35.  
  36. </script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.