Auto Switch Between jQuery UI Tabs - TimerTabPanel

TimerTabPanel is a lightweight jQuery extension for jQuery UI that automatically switches between jQuery UI tabs at a given speed. 

Auto pause on hover is supported as well.

How to use it:

1. Include the necessary jQuery and jQuery UI on the html page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

2. Download and include the jQuery TimerTabPanel plugin's script after jQuery.

<script src="js/ttpanel.js"></script>

3. Call the function on the jQuery UI tabs widget and specify the autoplay interval in milliseconds (Default: 2000ms).

<div id="tabs">
  <ul>
    <li><a href="#tab1">Title 1</a></li>
    <li><a href="#tab2">Title 2</a></li>
    <li><a href="#tab3">Title 3</a></li>
  </ul>
  <div id="tab1">
    <p> tab1 contents</p>
  </div>
  <div id="tab2">
    <p> tab2 contents</p>
  </div>
  <div id="tab3">
    <p> tab3 contents</p>
  </div>
</div>

$(function () {
  $("#tabs").timerTabPanel({
    timeInterval:1000
  });
});

4. Set the initial tab (Default: 1).

$(function () {
  $("#tabs").timerTabPanel({
    startTab: 2
  });
});

5. Default CSS selectors.

$(function () {
  $("#tabs").timerTabPanel({
    tabPanel: this,
    tabElm: "li",
    panelElm: "div"
  });
});

---

This awesome jQuery plugin is developed by OLD-ONE. For more Advanced Usages, please check the demo page or visit the official website.