i'm developing website , need tabs slider tabs links , slider functionality.
when user click on lower links content change , same functionality when user click on next , previous buttons.
please see image better understanding. in advance waiting positive reply back
i hope following helps you:
<script type="text/javascript"> $(document).ready(function(){ // enable or leave keys $('.slider').each(function(){ if($('li:last',this).width()+$('li:last',this).offset().left-$('li:first',this).offset().left>$('div',this).width()){ // enable buttons $('button',this).css('display','inline'); $('button.prev',this).css('visibility','hidden'); } }); $(".slider .next").click(function(){ //remove exist selector //set width widest of either var $div =$('div',this.parentnode) ,maxoffset = $('li:last',$div).width()+$('li:last',$div).offset().left - $('li:first',$div).offset().left - $div.width() ,offset = math.abs(parseint( $('ul',$div).css('marginleft') )) ,diff = $div.width(); if( offset >= maxoffset ) return; else if ( offset + diff >= maxoffset ){ diff = maxoffset - offset + 20; // hide $(this).css('visibility','hidden'); } // enable other $('.prev', this.parentnode).css('visibility','visible'); $("ul", $(this).parent() ).animate({ marginleft: "-=" + diff },400, 'swing'); }); $(".slider .prev").click(function(){ var offset = math.abs(parseint( $('ul',this.parentnode).css('marginleft') )); var diff = $('div',this.parentnode).width(); if( offset <= 0 ) return; else if ( offset - diff <= 0 ){ $(this).css('visibility','hidden'); diff = offset; } $('.next', this.parentnode).css('visibility','visible'); $("ul",$(this).parent()).animate({ marginleft: '+='+diff },400, 'swing'); }); }); </script> <style> .slider .next, .slider .prev{ display:none; background-color:white; border:0; font:bold 20px helvetica; color:#bbb; float:left; padding:0; margin:0; } .slider .next{ float:right; } .slider div{ overflow:hidden; text-align:left; height:none; margin:0; padding:0; } .slider div ul{ width:3000px;// set arbitary high value overflow:hidden; margin:0; padding:0; margin-left:0; } .slider div ul li{ display:inline; padding:10px; margin:0; background:#eee; border:1px solid #ddd; } </style> <div class='slider'> <button class='prev'><</button> <button class='next'>></button> <div> <ul> <li>apples</li> <li>pears</li> <li>stairs</li> <li>cares</li> <li>elephants</li> <li>spanish chickens</li> <li>marlborough house</li> <li>thameside tavern</li> </ul> </div> reference: http://perplexed.co.uk/1991_jquery_scroll_tabs_like_browser_tabs.htm
