Posted By

charmcitycoder on 01/05/10

Tagged

Versions (?)

Last Edited at 01/05/10 04:06pm

Statistics

Viewed 737 times

Favorited by 0 user(s)

Related snippets

jquery scrollto sample code

/ Published in: HTML

Pared down example...
Using serialScroll 1.2.2, scrollTo 1.4.2

Highlighted TextExpand

div id="carousel-container">      
     <div id="paging">
        <ul>
          <li><a href="#" class="current-link" id="p1">1</a> </li>
          <li><a href="#" id="p2">2</a> </li>
          <li><a href="#" id="p3">3</a> </li>
        </ul>
      </div>  
      
      
    <div id="horizontal_carousel">    
      <div class="previous_button" id="prev_button"></div>
      <div class="container" id="divResults">
        <ul>
          <li><a href="#" class="check-link" id=""><img alt="SOMETHING" title="SOMETHING" src="/images/something.jpg"/></a></li>
          <li><a href="#" class="check-link" id=""><img alt="SOMETHING" title="SOMETHING" src="/images/something.jpg"/></a></li>
          <li><a href="#" class="check-link" id=""><img alt="SOMETHING" title="SOMETHING" src="/images/something.jpg"/></a></li>
          <li><a href="#" class="check-link" id=""><img alt="SOMETHING" title="SOMETHING" src="/images/something.jpg"/></a></li>
	</ul>
      </div>
      <div class="next_button" id="next_button"></div>
    </div>
    
</div>

// Javascript (called from an external file)
jQuery(function( $ ){
	
	var $nav = $('#paging li a');	
	
	$('#carousel-container').serialScroll({
		target:'#divResults',
		items:'li', 
		prev:'div.previous_button',
		next:'div.next_button',
		axis:'xy',
		duration:700,
		force:true, 
		exclude:3,
		step:4,
		jump:false,
		navigation:$nav,
		
					
		onBefore:function( e, elem, $pane, $items, pos ){
			$nav.removeClass('current-link');
			$nav.eq(pos).addClass('current-link');
			
			e.preventDefault();
			if( this.blur )
				this.blur();						
			}
		
		}); //end serial scroll init
	
			
	}	
)

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.