How to make jQuery tabs to slide?

I use jquery tabs(tabs). I want to make the tabs to be slided horizontally(slide left/right)..

I googled and found that I can pass 'fx' parameter开发者_开发技巧 to tabs, but I didn't found what parameter to pass in order to make tabs to slide.

Thank you

This plugin is great, it's called CodaSlider. Works like a charm and is very easy to use. Will save you hours of work.

This worked for me:

$("#tabs").tabs( { show: { effect: "slide", direction: "left", duration: 500 }});

You may find the options for the "slide" effect here: http://docs.jquery.com/UI/Effects/Slide

For example,

$( ".selector" ).tabs({ fx: { direction: 'left' } });

You can also find other animation options at the following link: http://docs.jquery.com/UI/Effects/

@DanAbramov The Coda Slider is very simple to use. All of those wrappers and containers are generated dynamically and do not require the programmer to set that up at all...

Also, while it doesn't wreck any layouts, it's not designed for mobile devices. Instead check out the Liquid Slider, which is an extension of the Coda Slider.

I built them both.

JQuery Tabs Sliding Responsive to Clicks- Forward & Backward

 $( "#jtabs" ).tabs({beforeActivate: function (event, ui) {
       var newTab = ui.newTab.index();
       var active = $("#jtabs").tabs("option", "active");

   ( newTab < active ) ?  $( "#jtabs" ).tabs( { show: { effect: "slide", direction: "right", duration: 200 }} ) :$( "#jtabs" ).tabs( { show: { effect: "slide", direction: "left", duration: 100 }} );
      }});

// NEXT Button
$(".nexttab").click(function() {
   var active = $( "#jtabs" ).tabs( "option", "active" );
$( "#jtabs" ).tabs( "option", "active", active + 1 );
});