Auto Play

Magic Tabs Auto Play

You can add a Magic Tabs Auto Play block to automatically cycle through a set of Magic Tabs and together with transitions turn a set of Magic Tabs into a simple slide show or slider. 

So you can see it all happening, this page is built as a set of Magic Tabs with autoplay.

To get started, please click the Play icon to the right. If the tabs are playing too quickly for you, simply hover the cursor over the tabs or click the Pause icon.

To resume playing, click the Play icon.

Play and Pause

There are many options for the events that start and stop playing, such as starting automatically when the page is loaded, when a visitor selects a tab, pausing when the mouse hovers over the tab body and resuming when the cursor moves off.

It is usually best to keep the options simple. For example, the player on this page is configured to pause When the mouse moves over a tab control and When the mouse moves over a tab body. There is no automatic start/resume. To resume, the Play button/icon needs to be clicked.

When your site uses Magic Tabs Auto Play for more than one set of tabs across multiple pages, its best to be consistent with the play and pause behaviour so users do not become confused by radically different behaviour.

Button text and design

In the block edit dialog you can configure the text shown in the Play and Pause buttons.

Custom templates are supplied with a few simple variations including replacing the button text with icons or even not shown at all. The templates are simple and it is easy to design your own custom templates to fit in with your theme, or use your theme to provide styling for the existing templates.

Duration, Direction & Cycle

You can configure auto play to play forward or backwards and to play through a set of Magic Tabs just once or cycle back to the start after the last tab.

The time each tab is shown for can be configured between 0.3 seconds and 30 minutes (1800 seconds).

What you choose really depends on the amount of information a user needs to take in on any one tab and what options you select for pausing/resuming play. Between 3 and 5 seconds is usually a good starting point.

Target Tab Set

A Magic Tabs Auto Play block can be placed anywhere on a page. If you only have one set of tabs on a page, the Magic Tabs Auto Play block will automatically associate itself with that set of tabs and place its play/pause controls on that set of tabs.

Where there is more than one set of tabs, you can identify a specific set of tabs by identifying any tab in that set by name or #id, or by the class Magic Tabs assigns to the tab set in Edit Block > Magic Tabs Auto Play > Target tab set. This is the same identification mechanism used more generally for direct linking to tabs and by the Magic Tabs Jump block.

You can even have multiple Magic Tabs Auto Play blocks each associated with a different set of Magic Tabs on a page, even playing through a nested sets of tabs.

This Example

This example uses a set of tabs with a vertical right template and transitions set to slide left/right with a Jswing easing.

The autoplay block is set without any play options, so playing only starts when the Play icon is clicked. The pause options are set to pause when the cursor is over the tabs or the tabbed content. 

The icons for play and pause are in a custom template supplied with the block.

As a general tip, while there are no limitations imposed on the number of behaviours you select for play and pause, its a good idea to keep it fairly simple so visitors are not confused.