How to make jQuery tabs to slide?

Question

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

score 3 · Answer 1 · answered Jan 10 '13 at 17:16

3

This worked for me:

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

answered Jan 10 '13 at 17:16

arslan

348
1
10

score 3 · Answer 2 · answered Mar 23 '11 at 13:02

3

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

answered Mar 23 '11 at 13:02

2

This plugin only wasted an hour of work for me. For those used to jQuery UI non-intrusive markup and willing to try this plugin, you should know that it requires you to insert a lot of containers and wrappers with classes like `panel-container` and its UI, turned on by default, can wreck your layout in some circumstances (I haven't figured out the cause because I gave up). – Dan Abramov Jan 27 '12 at 17:45
The link is broken – musefan Feb 20 '18 at 09:43

score 2 · Accepted Answer · answered Mar 24 '11 at 05:22

2

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/

answered Mar 24 '11 at 05:22

William Niu

15,798
7
53
93

I tested this code and it doesn't work. The only 'slide' option seems to be `$('.tabs').tabs({ fx: { width: 'toggle' } });` but this slides both ways. Surely must be possible to slide one way but I can't find any documentation for this. – Space Sep 21 '11 at 15:18
1

Take a look at this one: http://stackoverflow.com/questions/1350666/jquery-ui-tabs-available-fx-options. – William Niu Sep 21 '11 at 15:51

score 0 · Answer 4 · answered Jan 05 '13 at 02:09

0

@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.

answered Jan 05 '13 at 02:09

Kevin Batdorf

342
2
7

The link is broken – musefan Feb 20 '18 at 09:44

score 0 · Answer 5 · answered Oct 08 '13 at 11:36

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 );
});

How to make jQuery tabs to slide?

5 Answers5