Minimalistic but extensible tab swapper. It can be used to create a tab swapper as well as a galerie slideshow. you can have effects like Moostack, the barack slideshow or jQuery nivoslider or whatever you want by providing an animation plugin. Demo

• Matrix
• Flip 3D
• Cube 3D
• Random
• Move
• Stack
• No animation

It is quite simple to use. what you need first is

<div id="slide">
<div class="ctab"><img src="images/slide1.jpg" width="400" height="300" /></div>
    <div class="ctab hidden"><img src="images/slide2.jpg" width="400" height="300" /></div>
    <div class="ctab hidden"><img src="images/slide3.jpg" width="400" height="300" /></div>
    <div class="ctab hidden"><img src="images/slide4.jpg" width="400" height="300" /></div>
  </div>
  
//the tabs
 <div class="tabs"><a href="#0">1</a><a href="#1">2</a><a href="#2">3</a><a href="#3">4</a></div>

var swapper = new Tab({

	container: 'slide',
	tabs: 'div.tabs a',
	onChange: function () {
	
		//do something
	}
});

• container - (mixed) the element that contains the panels.
• selector - (string, optional) only container children that match the selector will be grabbed.
• animation - (string, optional) the transition plugin to use for swapping. default to None
• params - (object, optional) parameters specific to the transition plugin.
• fx - (object, optional) parameters for the animation. this can be any of the Fx parameters.
• current - (int, optional) index of the panel that is displayed first. default to 0
• tabs - (mixed, optional) when a tab is clicked, the corresponding panel is shown. anything you can pass to $$ is accepted.
• activeClass - (string, optional) style applied to the selected tab.
• inactiveClass - (string, optional) style applied to every unselected tab.
• link - (string) control the way concurrent changes are handled. accepted values are chain (default), ignore, cancel

Fired right after the tabs has been setup.

onCreate(newPanel, index)

1. newPanel - (element) the active panel.
2. index - (int) the index of the active panel.

Fired when the active panel is changed.

onChange(newPanel, curPanel, index, current)

1. newPanel - (element) the active panel.
2. oldPanel - (element) the previously selected panel.
3. index - (int) the index of the active panel.
4. current - (int) index of the previously selected panel.

display the next panel.

• (object) - This Tab instance.

display the previous panel.

• (object) - This Tab instance.

add a new panel to the tab.

• panel - (mixed) the new panel.
• tab - (mixed, optional) tab associated to the new panel
• index - (int, optional) position where the new panel is injected, if not specified, the new panel will be inserted at the end

• (object) - This Tab instance.

remove the panel at the given index.

• index - (int)

• (object) - an object {panel: panel, tab: tab} containing the panel and the associated tab.

resize the container to fit the panel offset. this is useful if you change the panel content.

• index - (int, optional) index of the panel. if not specified, the current panel is used.

• (object) - an object {panel: panel, tab: tab} containing the panel and the associated tab.

• (int) - the index of the displayed panel

set the displayed panel.

swapper.setSelectedIndex(0);

• index - (int) index of the panel to display.
• direction - (int) indicate in which direction panels should be rotated. accepted values are -1 (right to left) and 1 (left to right).

• (object) - This Tab instance.

return true if the given transition is supported by the browser.

swapper.isSupported('Flip');

• transition - (string) transition name.

• (boolean)