JSFiddle - React, Tailwind, and code Playground

by Patrick Kershner

HTML

<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a>

    </li>
    <li><a href="#profile" data-toggle="tab">Profile</a>

    </li>
    <li><a href="#messages" data-toggle="tab">Messages</a>

    </li>
    <li><a href="#settings" data-toggle="tab">Settings</a>

    </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
    <div class="tab-pane" id="settings">...</div>
</div>

CSS

@import //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

JavaScript

var tabCarousel = setInterval(function () {
    var tabs = $('#myTab .nav-tabs > li'),
        active = tabs.filter('.active'),
        next = active.next('li'),
        toClick = next.length ? next.find('a') : tabs.eq(0).find('a');

    toClick.trigger('click');
}, 3000);