Slideshow plugin for the Tabs with jquery

HTML coding

The HTML setup is similar to the normal tab setup except that we have the “next” and “prev” action buttons available and the tabs are placed below the panes.


Lorem ipsum ..

Lorem ipsum ..

Lorem ipsum ..


JavaScript coding

The JavaScript setup is pretty straightforward. The slideshow plugin is chained after the tabs initialization call. A non-zero fadeOutSpeed together with the fade effect creates the “cross-fading” effect. The rotate

configuration property makes the slides behave so that when the last tab is encountered the next tab starts over from the beginning. The same thing happens when going backwards from the last tab.

$(".slidetabs").tabs(".images > div", {

// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",

// start from the beginning after the last tab
rotate: true

// use the slideshow plugin. It accepts its own configuration

Play/Stop action buttons

Those play and stop action buttons are there to show the automatic slideshow effect. The slideshow plugin will add additional API methods to the main Tabs API and those buttons are calling our new play and stop

methods as follows:


Leave a comment