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.

Additional Pages

Magic Tabs documentation

Getting Started
To help you get started with Magic Tabs, this Getting Started page is built as a series of Magic Tabs with content and other blocks between. You can…
Read more...
Advanced Settings
To use Magic Tabs for a straight forward set of tabs, you only need enter a Tab Heading and save the edit dialog. Magic Tabs takes care of everything…
Read more...
Tabs with Layouts and Containers
You can create a set of tabs wholly within a single layout cell. You can create a layout wholly within a tab. The important consideration is that the…
Read more...
Accordions
This set of Magic Tabs is configured to always show as an accordion. To read about how it is done, please click to open the first accordion tab.
Read more...
Global Settings
Global settings can be edited directly from the Magic Tabs block edit dialog. These settings are global and will affect all Magic Tabs blocks on a…
Read more...
Jump and Linking to Specific Tabs
Link within a page using the Magic Tabs Jump block or with an href. Link from other pages with a url ?tab=tab_name parameter.
Read more...
Auto Play
The Magic Tabs Auto Play block automatically cycles through a set of Magic Tabs. With transitions you can turn a set of Magic Tabs into a simple slide…
Read more...
Splitting a Form into Tabs
The Form to Magic Tabs block can be used to break a form or page list into a series of tabs. It works with forms blocks from Express, Legacy Form,…
Read more...
Form to Magic Tabs block details
Details of how the Form to Magic Tabs block is used to split a form into tabs.
Read more...
Splitting a Page List to an Accordion
Details of how the Form to Magic Tabs block is used to split a a page list into an accordion or tabs
Read more...
Tabs and AJAX
AJAX loading sets of tabs and AJAX loading content within a tab.
Read more...
No Tabs
Magic tabs without the tabs!
Read more...
Developing Tab Templates
Magic Tabs comes with many example tab templates. For many sites, one of these will fit in with the site theme with no further modification.
Read more...
Problem Solving
If you start building a page with Magic Tabs and don't see the results you expect, here are some tips to help you solve any problems.
Read more...
Developer Interfaces
Magic Tabs provides JavaScript events and a php interface for developers to integrate to tabs.
Read more...
Version History
Version history for Magic Tabs.
Read more...