Starting with a blank document, add the SpryTabbedPanels widget.
Ensuring that you have both SpryEffects.js and SpryTabbedPanelsExtensions.js in your SpryAssets folder, add a link to both of these files.
Then modify the selector to add the interval and a trigger to start the animation.
Your document should look like the following where the changes to the out-of-the-box widget have been highlighted.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<script src="SpryAssets/SpryEffects.js"></script>
<script src="SpryAssets/SpryTabbedPanelsExtensions.js"></script>
<script>
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", { interval: 3000 });
TabbedPanels1.start();
</script>
</body>
</html>
