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 button.

 

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.

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).

Target Tab set

A Magic Tabs Auto Play block can be placed anywhere on a page. If you only have one set of Magic 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.

Multiple Tab Sets

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. 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.

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. Each tab is shown for 5 seconds.

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.

Screenshot - Tabs

Magic Tabs Auto Play1.png

Screenshot - Edit

Magic Tabs Auto Play2.png

Last updated: over a year ago