Bootstrap UI : Auto Tab Move with Time

StackOverflow https://stackoverflow.com/questions/23333716

Question

I have a AnguleJS Bootstrp UI Horizontal Tab structure.

enter image description here

Once I click on Tab 2 the contents of Tab 2 displays and same for Tab 3.

My question is:

I want to implement in a way that after 3000 ms the Tab 2 auto display & after that Tab 3 without click on Tabs. and Once I click any particular Tab It Stops and display the content of that Tab.

Here is the Demo for Horizontal Tab view (Onclick): Plunker Demo

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="TabsDemoCtrl">

  <tabset>

    <tab ng-repeat="tab in tabs" heading="{{tab.title}}">
      {{tab.content}}
    </tab>

  </tabset>


</div>
  </body>
</html>
Was it helpful?

Solution

So there is a directive variable called active there you can pass a variable, that indicates if the tab should be active.

Put those variables into an array, set an interval and use an index to set the right tabs active.

My working plunker: PlunkerDemo Maybe use angular's $interval.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top