Advanced Search

jquery scrollto sample code

/ Published in: HTML
Save to your folder(s)
Pared down example...
Using serialScroll 1.2.2, scrollTo 1.4.2

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. div id="carousel-container">      
  2.      <div id="paging">
  3.         <ul>
  4.           <li><a href="#" class="current-link" id="p1">1</a> </li>
  5.           <li><a href="#" id="p2">2</a> </li>
  6.           <li><a href="#" id="p3">3</a> </li>
  7.         </ul>
  8.       </div>  
  9.  
  10.  
  11.     <div id="horizontal_carousel">    
  12.       <div class="previous_button" id="prev_button"></div>
  13.       <div class="container" id="divResults">
  14.         <ul>
  15.           <li><a href="#" class="check-link" id=""><img alt="SOMETHING" title="SOMETHING" src="/images/something.jpg"/></a></li>
  16.           <li><a href="#" class="check-link" id=""><img alt="SOMETHING" title="SOMETHING" src="/images/something.jpg"/></a></li>
  17.           <li><a href="#" class="check-link" id=""><img alt="SOMETHING" title="SOMETHING" src="/images/something.jpg"/></a></li>
  18.           <li><a href="#" class="check-link" id=""><img alt="SOMETHING" title="SOMETHING" src="/images/something.jpg"/></a></li>
  19. 	</ul>
  20.       </div>
  21.       <div class="next_button" id="next_button"></div>
  22.     </div>
  23.  
  24. </div>
  25.  
  26.  
  27. // Javascript (called from an external file)
  28. jQuery(function( $ ){
  29.  
  30. 	var $nav = $('#paging li a');	
  31.  
  32. 	$('#carousel-container').serialScroll({
  33. 		target:'#divResults',
  34. 		items:'li', 
  35. 		prev:'div.previous_button',
  36. 		next:'div.next_button',
  37. 		axis:'xy',
  38. 		duration:700,
  39. 		force:true, 
  40. 		exclude:3,
  41. 		step:4,
  42. 		jump:false,
  43. 		navigation:$nav,
  44.  
  45.  
  46. 		onBefore:function( e, elem, $pane, $items, pos ){
  47. 			$nav.removeClass('current-link');
  48. 			$nav.eq(pos).addClass('current-link');
  49.  
  50. 			e.preventDefault();
  51. 			if( this.blur )
  52. 				this.blur();						
  53. 			}
  54.  
  55. 		}); //end serial scroll init
  56.  
  57.  
  58. 	}	
  59. )

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.