Slideshow plugin

Automatic switching between tabs at pre-configured intervals.

Aenean nec imperdiet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Suspendisse potenti. Sed elementum risus eleifend massa vestibulum consectetur. Duis massa augue, aliquam eget fringilla vel, aliquam vitae arcu. Nam sed magna mi. Praesent odio neque, dapibus sit amet suscipit at, tempus sed nibh. Aliquam sagittis ligula in ligula faucibus cursus. Quisque vulputate pellentesque facilisis.

Second pane

Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra.

Vivamus euismod euismod sagittis. Etiam cursus neque non lectus mattis cursus et a libero. Vivamus condimentum hendrerit metus, a sollicitudin magna vulputate eu. Donec sed tincidunt lectus. Donec tellus lectus, fermentum sit amet porta non, rhoncus ac mi. Quisque placerat auctor justo, a egestas urna tincidunt eleifend.

Third pane

Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.

Aenean elit lorem, pretium vitae dictum in, fermentum consequat dolor. Proin consectetur sollicitudin tellus, non elementum turpis pharetra non. Sed quis tellus quam.

standalone demo

Features

The "Next slide" and "Previous slide" action buttons work without any JavaScript. Buttons can easily be hidden when there is no next or previous tab available.
The slideshow is automatically paused when you move your mouse over any of the slideshow elements.
By default the next slide is shown when the active pane is clicked; however, this can be changed in the configuration.

Usage

The best way to learn is to study the full documentation for the example above. For the impatient here is the JavaScript setup:

    $(".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
    }).slideshow();

JavaScript

Configuration

Full list of configuration options for the Slideshow plugin.

property	default	description
next	`'.forward'`	Selector for the element to which a "next tab" action should be bound. If you instantiate multiple slideshows on the same page you need to enclose all slideshow elements (tabs/panes/next & prev actions) inside a mutual wrapper element. This logic follows the same principles as creating multiple Tabs instances.
prev	`'.backward'`	Selector for the sibling element to which a "previous tab" action should be bound. If you instantiate multiple slideshows with the same call you need to enclose all slideshow elements (tabs/panes/next & prev actions) inside a mutual wrapper element. This logic follows the same principles as creating multiple Tabs instances.
disabledClass	`'disabled'`	The CSS class name for disabled `prev` and `next` elements. For example, the `prev` element is disabled when there are no previous items to scroll to.
autoplay	`false`	If this property is set to `true` then the tabs will automatically advance to the next tab implementing an automatically "playable" slideshow. This is convenient when you have enabled the `rotate` property for tabs.
autopause	`true`	If this property is set to `true`, when the next/prev tab action buttons are mouseovered then the autoplay functionality will pause.
interval	`3000`	The time (in milliseconds) between automatic stepping between tabs. This option is valid only when `autoplay` is enabled or the `play()` method is called.
clickable	`true`	When set to `true` then the tabs will automatically advance to the next tab by clicking on the visible pane.

JavaScript API

method	return value	description/example
getConf	`Object`	since 1.2.0. returns the configuration object for this plugin
getTabs	`Tabs`	since 1.2.0. returns a reference to the Tabs API.
play	`API`	Begins a playable slideshow.
pause	`API`	Pauses the slideshow. Playback will resume when the mouse has moved away from the tabs, panes and navigational buttons.
stop	`API`	Stops the slideshow. This can only be resumed by calling the `play()` method.

Events

Make sure you have read about Events in jQuery Tools. All event listeners receive the Event Object as the first argument.

event	When does it occur?
onBeforePlay	before the playback starts. Returning `false` in the callback prevents the playback from starting.
onPlay	when the playback starts.
onBeforePause	before the playback pauses. Returning `false` in the callback prevents the playback from starting.
onPause	when the playback pauses.