JSFiddle - React, Tailwind, and code Playground

by Patrick Kershner

HTML

<div id="tab-carousel">
<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>
</div>

CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css')

JavaScript

$(function() {
    var tabCarousel = setInterval(function() {
        var tabs = $('#tab-carousel .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);
});